FlatList未在react-native中填充100%高度

mbjcgjjk  于 2023-03-24  发布在  React
关注(0)|答案(4)|浏览(149)

我得到了一个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>
        );
    }
oxalkeyp

oxalkeyp1#

你实际上想把flex放到你的FlatList上。
因此FlatList上的flex:1将使它填充容器的其余部分。
您可能希望根据当前styles.cardContainer中的内容来调整它以适应您的解决方案。

<View style={{ flex: 1 }}>
        <View style={{ height: Dimensions.get("window").height * 0.25 }} />
        <FlatList
          numColumns={2}
          style={{ flex: 1 }}
          keyExtractor={this._keyExtractor}
          data={["1", "2", "3"]}
          renderItem={this._renderItem}
        />
    </View>
jgwigjjp

jgwigjjp2#

FlatListcontentContainerStyle设置为flexGrow: 1不会阻止长列表上的滚动功能。
旧版本可能会有问题,但最新的作品刚刚好。
https://github.com/facebook/react-native/issues/17944

l0oc07j2

l0oc07j23#

为父对象指定高度样式:'100%',如果您有一个TabBar或其他可以正确覆盖/不覆盖Flatlist项目的东西,请使用paddingBottom。
例如:

<View style={{ paddingBottom: 60, height: '100%' }} >
   <FlatList ... />
</View>
g0czyy6m

g0czyy6m4#

2年后,我在列表容器中添加了一个justifyContent:center,这使得flex不能填满整个空间。否则,flexGrow就可以工作了。

相关问题