如何在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支持图像的砖石布局。

希望这对您有所帮助。随时提出疑问。