陣營本地的，滾動視圖進行滾動

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