时间戳

首页 > 解决方案 > React Native - 带有列包装器的水平平面列表没有按要求正确地使用 flex？

react-native - React Native - 带有列包装器的水平平面列表没有按要求正确地使用 flex？

问题描述

我有一个动态平面列表，其值应在 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>
                        );
                    }}
                />

但是，输出不是我想要的。

比方说，如果列表的长度是 3 的倍数，例如 6、9、12，它可以按我的意愿工作。

但是，如果列表长度为 8，则前两行呈现正常。但是，第三行为其余两项提供了全部空间。这是我不想要的。

目前我得到如下输出当前输出图像

但输出应该是这样的，在此处输入图像描述

任何人都可以提出解决方法吗？

谢谢。

标签： react-nativereact-native-androidreact-native-iosreact-native-flatlistreact-native-scrollview

解决方案

由于您是itemWidth手动计算的，因此您可以使用justify: flex-endfor columnWrapperStyle，然后将 a 添加marginRight: 6到每行中的每个第一项和第二项：

renderItem={(item, index) => {
  const isThirdColumn = (index + 1) % 3 === 0;
  const marginRight = isThirdColumn ? 0 : 6;

  return (
    <View style={{ marginRight, ...otherStyles }}>

推荐阅读