如何在 React Native (FlatList) 中删除我的卡片之间的间距？

Question

如您所见，我想用砖石展示我的物品。但是到目前为止现有的软件包不允许我用不同类型的卡来做。

这是我的平面列表。 "PiinsStandard" 可以是视频、图片或帖子。

            <FlatList
                numColumns={2}
                style={styles.list}
                data={this.props.PiinsFeed.piins}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (<PiinsStandard piins={item} navigation={this.props.navigation} />)}
                onScroll={this._onScroll}
                onEndReachedThreshold={0.5}
                onEndReached={() => this._getPiinsList()}
            />

这是我每张卡片的风格

    card: {
        marginVertical: 5,
        marginHorizontal: 4,
        borderRadius: 8,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        flex: 1,
    }

如有解决方案，谢谢。我已经尝试过这个包：https://github.com/brh55/react-native-masonry 但无法按照我的意愿定制我的卡

Answer 1

根据 react-native FlatList，所有项目都应具有相同的高度 - 不支持砌体布局。

所以为了实现砌体布局，你必须使用自定义库。

@appandflow/masonry-list 允许以高效的方式创建砖石风格的列表布局。
react-native-masonry-list 支持图像的砌体布局。

希望对您有所帮助。有疑问欢迎留言。

如何在 React Native (FlatList) 中删除我的卡片之间的间距？

How to delete spacing between my card in react Native (FlatList)?

css

masonry

react-native