react native中關於ScrollView

遇到的問題：用ScrollView時不能滑動

原因：ScrollView必須有一個確定的高度才能正常工作，因爲它實際上所做的就是將一系列不確定高度的子組件裝進一個確定高度的容器（通過滾動操作）。要給一個ScrollView確定一個高度的話，要麼直接給它設置高度（不建議），要麼確定所有的父容器都有確定的高度。一般來說我們會給ScrollView設置flex: 1以使其自動填充父容器的空餘空間，但前提條件是所有的父容器本身也設置了flex或者指定了高度，否則就會導致無法正常滾動，你可以使用元素查看器來查找問題的原因。

render(){
    return(
      <View style={{flex:1}}>
      <View style={{ width: '100%', height: 100, justifyContent: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1, paddingLeft: 15, backgroundColor: '#fff',marginTop:200 }}>    
      <View style={{backgroundColor:'#ccf'}}>
      <ScrollView>
      <Menu navigation={this.props.navigation} />
      </ScrollView>
      </View>
      </View>
    )
  }
}

這種情況下，Menu裏面的內容不能滑動，原因父元素高度不知道。

修改爲以下,在父組件裏面添加flex:1,這樣可以自適應頁面大小；若設置父元素高度值爲固定值也可以，但ScrollView就在一個固定高度的區域滑動。

render(){
    return(
      <View style={{flex:1}}>
      <View style={{ width: '100%', height: 100, justifyContent: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1, paddingLeft: 15, backgroundColor: '#fff',marginTop:200 }}>
        </View>
      <View style={{backgroundColor:'#ccf',flex:1}}>
      <ScrollView>
      <Menu navigation={this.props.navigation} />
      </ScrollView>
      </View>
       
      </View>
    )
  }

最近的父組件設置固定高度實質和ScrollView設置固定高度或者裏面的子組件設置固定高度效果一樣，可以滑動但不靈活。