React-Native, przewiń widok nie Przewijanie

Question

Kiedy owinąć treści jak w poniższym przykładzie poniżej, przewija Idealnie ..

return(
    <ScrollView> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
     ... 
    </ScrollView> 
); 

Jednak ilekroć zawinąć go w innym zdaniem, nie będzie przewijać.

return(
    <View> 
     <ScrollView> 
      <Text> TEST </Text> 
      <Text> TEST </Text> 
      <Text> TEST </Text> 
      <Text> TEST </Text> 
      ...  
     </ScrollView> 
    </View> 
); 

Czy istnieje jakiś sposób rozwiązania tego problemu. Próbuję umieścić nagłówek paska nawigacji nad całą zawartością, ale nie mogłem tego rozgryźć.

Answer 1

Spróbuj dodać komponenty style={{flex:1}} do <View> i <ScrollView>. Trzeba również literówkę w kodzie: </SCrollView> w linii 9. Przykładowy kod będzie wyglądać następująco:

<View style={{backgroundColor:'white', flex:1}}> 
    <NavigationBar title="Title" /> 
    <ScrollView style={{flex:1, backgroundColor:'white'}}> 
      <View style={{flex:1,justifyContent:'center'}}> 
       <RegisterForm /> 
      </View> 
    </ScrollView> 
</View> 

Answer 2

on typo: Twój blisko ScrollView znacznik jest: </SCrollView> zamiast </ScrollView> A u trzeba dodać styl do pojemnika View, więc kod musi być tak:

return(
<View style={{flex: 1}}> 
    <ScrollView> 
    <Text> TEST </Text> 
    <Text> TEST </Text> 
    <Text> TEST </Text> 
    <Text> TEST </Text> 
     ...  
    </ScrollView> 
</View> 

); 

Answer 3

Innym rozwiązaniem jest dodanie właściwość height z rodzicem View pojemnika. To czasami działa dobrze podczas obliczania wysokości w stosunku do wysokości ekranu.

render() { 
    const screenHeight = Dimensions.get('window').height 

    return(
    <View style={{height: screenHeight}}> 
     <ScrollView> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
     <Text> TEST </Text> 
      ...  
     </ScrollView> 
    </View> 
) 
}