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