react-native - FlatList numColumns 和 flex justifyContent 问题

Question

我有一个平面列表，我想在其中使用 100% 的容器宽度以类似网格的方式显示，但是我似乎无法使用平面列表来实现这一点。
空间之间，因为我已经走到两侧(根据图像)空间围绕容器中的盒子居中，空间均匀地做同样的事情，带有 marginRight 的 flex-start 是不准确的。不完全确定如何实现这一目标？谢谢

<FlatList
    numColumns={3}
    columnWrapperStyle={{ justifyContent: "space-between"}}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

问题:
需要时尚之间的空间，但如果行中有 2 个项目，则根据动态数据将第二个项目移动到中间？

Answer 1

您将不得不删除“columnWrapperStyle”

<FlatList
    numColumns={3}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

示例链接: https://snack.expo.io/@msbot01/5aee23