React native FlatList numColumns和flex验证内容问题

我有一个平面列表，我想用100%的容器宽度以类似网格的方式显示，但我似乎无法用平面列表实现这一点。
中间的空间，因为我已经到了侧面（如图所示）容器中盒子中心周围的空间，空间均匀地做同样的事情，弹性开始与边缘光是不准确的。不完全确定如何实现这一点？谢谢

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

item.id}
renderItem={renderItemComponent}
/>

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

您必须删除“columnWrapperStyle”

item.id}
renderItem={renderItemComponent}
/>

---

示例链接：

假设

numColumns=3

和

renderItemComponent

是一个组件。那么这就是让它像你想要的那样工作的解决方案

<FlatList
  numColumns={numColumns}
  contentContainerStyle={{
    marginTop: 20,
  }}
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={<renderItemComponent style={{ flex: 1 / numColumns }} />}
/>;

item.id}
renderItem={}
/>;

cam您是否删除columnWrapperStyle={{{justifyContent:“}”之间的空格并检查一次。谢谢您我已经尝试过了，但没有按照我想要的方式工作。谢谢您的建议，但我已经尝试过这个方法-正如我提到的，我需要它在容器上均匀分布，使用容器的100%宽度，因此我尝试了间隔-根据您的建议查看我的结果-您添加平面列表的容器似乎没有100%的全宽。如果可能的话，共享完整代码是这样的，容器样式有flex:1，宽度：“100%”，外部包装也有flex:1，宽度：“100%”（外部白色区域，如您所见，边缘为水平），每个框的宽度+高度为80-（宽度：80，高度：80）。我是否需要添加左右边距并使用Dimensions API？您不需要，但我认为一些填充或边距正在应用于平面列表容器或每个渲染项

<FlatList
  numColumns={numColumns}
  contentContainerStyle={{
    marginTop: 20,
  }}
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={<renderItemComponent style={{ flex: 1 / numColumns }} />}
/>;