阵营本地的，滚动视图进行滚动

Question

当我包裹内容像下面这个例子，它滚动完美..

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> 
); 

有没有解决这个问题。我试图将导航栏标题放在所有内容之上，但无法真正理解它。

Answer 1

尝试将style={{flex:1}}添加到<View>和<ScrollView>组件。您也可以在你的代码一个错字：</SCrollView>在第9行的示例代码如下所示：

<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

它一个错字： 你接近ScrollView标签：的 </SCrollView>代替</ScrollView> 和u需要添加样式到View容器，所以你的代码必须是这样的：

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

); 

Answer 3

另一个解决方案是一个高度属性添加到父视图容器。根据屏幕高度计算高度时，这有时效果很好。

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> 
) 
}