React Native-带有列包装器的水平Flatlist不能按要求正确使用flex？]

Question

我有一个动态平面列表，其值应在3列的水平列表中呈现。但是，我无法使其显示为我想要的。

我正在尝试如下代码，

    let data = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
    const { width } = Dimensions.get('window');
    const itemWidth = (width - 12) / 3;

           <FlatList
                    columnWrapperStyle={{ justifyContent: 'space-around', alignItems: 'flex-start' }}
                    numColumns={3}
                    data={data}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator
                    keyExtractor={(item, index) => `${index}${item}`}
                    renderItem={(item) => {
                        return (
                            <View style={{ flex: 1, backgroundColor: '#ddd', minWidth: itemWidth, maxWidth: itemWidth }}>
                                <Text >
                                    Hello World
                            </Text>
                            </View>
                        );
                    }}
                />

但是输出不是我想要的。

让我们说，如果list是3的倍数，例如6,9,12的长度，它可以按我的要求工作。

但是，如果列表的长度为8，则前两行都可以呈现。但是，第三行为其余的两个项目留出了足够的空间。我不想要的。

当前，我正在按如下方式输出输出

但是输出应为

有人可以建议解决方法吗？

谢谢。

我有一个动态平面列表，其值应在3列的水平列表中呈现。但是，我无法使其显示为我想要的。我正在尝试如下代码，让data = [“ ...

Answer 1

看到我可以为您提供一个合乎逻辑的解决方案，并且我假设您想在Flatlist中绘制文本。对于这种情况，您需要为各个空插槽附加一个空div。

如果您希望numOfColumns为3，