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设置固定高度或者里面的子组件设置固定高度效果一样,可以滑动但不灵活。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章