©2020-2024 ioDraw All rights reserved,
Privacy Policy
之前项目中,遇到过一个问题就是Scrollview嵌套了ScrollableTabView，ScrollableTabView中又嵌套Flatlist，
当Flatlist数据超过一屏时，view会被截取，且不可滑动。下面分析一下为什么出现这个问题：
原因:react native 官方组件 ScrollView 默认会撑满父级容器高度。
解决方案:react native 官方组件需要在 ScrollView 外面嵌套父级组件来约束高度，比如嵌套一个 View 设置
height为screenHeight(屏幕高度);我们在使用Scrollview的过程中，首先需要在其外层包裹一层View(指定固定高度),
然后Scrollview设置flex:1自适应铺满，这里给大家看一下，我的布局大致是这样的，有些具体逻辑省略了，这种情况下，
let maxH = dimens.screenHeight; //屏幕高度
//根据UI设计动态计算ScrollView内部view的高度
if(this.state.data.length && this.state.data.length>2 ){
//这里仅仅提供一种思路，具体的你们可以根据实际情况动态算这个高度
maxH = maxH + (this.state.data.length-2)*dimens.scale(105);
//如果超过2个item，加上每个item高度是105
}
<View style={styles.container}>
<ScrollView style={{flex:1}}>
<View style={[styles.container,{height:maxH}]} //
这里的maxH就是动态计算的高度，根据Flatlist的item数量来决定
<ScrollableTabView
initialPage={0}
renderTabBar={() => <SegmentTabBar
style={styles.SegmentTabBarStyle}
activeTextColor={colors.wideFont}
inactiveTextColor={colors.wideFont}
activeTextFontSize={20}
inactiveTextFontSize={18}
activeViewStyle={styles.activeViewStyle}
inactiveViewStyle={styles.inactiveViewStyle}
underlineStyle={{height:
0}}/>}
onChangeTab={this.changeRoomEvent}
>
<FlatList
style={styles.flatListStyle}
renderItem={this.listDeviceItemVIew}
keyExtractor={(item, index)
=> 'index' + item + index}
data={this.state.data}
numColumns={1}
showsVerticalScrollIndicator={false}
bounces={false}
/>
</ScrollableTabView>
</ScrollView>
</View>
以上这种方法即可达到，无论item数量是多少个，都可以显示完全，页面数据不会被截取。欢迎补充，谢谢~