如何在 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 支持图片的砌体布局。

希望这对您有所帮助。如有疑问，请随意。