我得到了一个FlatList,它占据了屏幕上50%的垂直空间。这个FlatList只有几个项目,因此,它并没有占据整个空间,而是只占据了一半,当我向上/向下滚动时,它看起来好像有overflow: hidden
。
我在RN GitHub上读到了this,他们建议在FlatList的contentContainerStyle
上使用flexGrow: 1
,还有父视图flex: 1
。但是不起作用。这还能用吗?他们说在ScrollViews上使用它,但是FlatList不是继承自ScrollView之类的吗?
这是我目前的结构:
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
numColumns={2}
style={ styles.cardContainer }
keyExtractor={ this._keyExtractor }
data={ this.state.listData }
renderItem={ this._renderItem }
>
</FlatList>
</View>
);
}
4条答案
按热度按时间oxalkeyp1#
你实际上想把flex放到你的
FlatList
上。因此
FlatList
上的flex:1
将使它填充容器的其余部分。您可能希望根据当前
styles.cardContainer
中的内容来调整它以适应您的解决方案。jgwigjjp2#
将
FlatList
的contentContainerStyle
设置为flexGrow: 1
不会阻止长列表上的滚动功能。旧版本可能会有问题,但最新的作品刚刚好。
https://github.com/facebook/react-native/issues/17944
l0oc07j23#
为父对象指定高度样式:'100%',如果您有一个TabBar或其他可以正确覆盖/不覆盖Flatlist项目的东西,请使用paddingBottom。
例如:
g0czyy6m4#
2年后,我在列表容器中添加了一个justifyContent:center,这使得flex不能填满整个空间。否则,flexGrow就可以工作了。