2016-09-17 5 views
10

をスクロールされない、それは 私は以下の例のようにコンテンツをラップすると反応させ、ネイティブ、スクロールビューは

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

はしかし、私は別のビューでそれをラップするたびに、それはスクロールしません...完全にスクロールします。

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

これには何らかの修正がありますか?私はすべてのコンテンツの上にナビゲーションバーのヘッダーを配置しようとしていますが、実際にそれを理解することはできませんでした。

答えて

7

style={{flex:1}}~<View><ScrollView>の成分を追加してみてください。あなたの近くにScrollViewタグがある :

<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> 
15

それタイプミス:</SCrollView>はライン9の例のコードは次のようになります。また、あなたのコードにタイプミスがあり </SCrollView>代わり </ScrollView>のUはする必要があなたのコードは次のようにする必要がありますので、Viewコンテナにスタイルを追加します。

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

); 
+1

フレックスを追加する:実際にそれを修正する!ありがとうございました。これは受け入れる必要があります答え –

1

別の解決策は、親ビューコンテナに高さプロパティを追加することです。これは、画面の高さに対して高さを計算するときにうまく機能することがあります。

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> 
) 
} 
関連する問題