时间戳

首页 > 解决方案 > FlatList 没有在 react-native 中填充 100% 的高度

react-native - FlatList 没有在 react-native 中填充 100% 的高度

问题描述

我得到了一个 FlatList，它占据了屏幕上 50% 的垂直空间。这个 FlatList 只有几个项目，正因为如此，它并没有占据整个空间，而是只占据了一半，当我向上/向下滚动时，它看起来好像有overflow: hidden.

我在 RN GitHub 上读到了这个，他们建议flexGrow: 1在 FlatList 上使用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>
        );
    }

标签： react-native

解决方案

你实际上想把 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>

推荐阅读