Question

我得到了一个FlatList，它占据了屏幕垂直空间的50％。这个FlatList只有几个项目，因此，它不会占用整个空间，而只占用一半的空间，当我向上/向下滚动时，看起来好像有overflow: hidden。

我在RN GitHub上阅读了this，他们建议在FlatList的flexGrow: 1上使用contentContainerStyle，也将父视图与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>
        );
    }

Answer 1

您实际上想将flex放在FlatList上。目前，您的contentContainerStyle上有它。

因此，flex:1上的FlatList将使其充满容器的其余部分。

您将要根据自己在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>

Answer 2

将contentContainerStyle中的FlatList设置为flexGrow: 1不会阻止长列表上的滚动功能。

旧版本可能有问题，但最新版本就可以了。
https://github.com/facebook/react-native/issues/17944

Answer 3

为了在 2 年后添加这个，我的列表容器中有一个 justifyContent:center，这就是使 flex 没有填满整个空间的原因。否则 flexGrow 会起作用。

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

3 个答案: