FlatList numColumns 和 flex justifyContent 问题答案

【问题标题】：FlatList numColumns and flex justifyContent issueFlatList numColumns 和 flex justifyContent 问题
【发布时间】：2020-03-06 16:40:44
【问题描述】：

我有一个平面列表，我想使用 100% 的容器宽度以网格形式显示，但是我似乎无法使用平面列表来实现这一点。
Space-between 正如我在两侧（根据图像）的空间 - 围绕容器中的盒子居中，空间均匀地做同样的事情，flex-start with a marginRight 不准确。不完全确定如何实现这一目标？谢谢

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

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

【问题讨论】：

您删除 columnWrapperStyle={{ justifyContent: "space-between"}} 并检查一次。
谢谢，我已经尝试过了，但没有按照我想要的方式工作。

标签： react-native flexbox react-native-flatlist

【解决方案1】：

您必须删除“columnWrapperStyle”

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

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

【讨论】：

感谢您的建议，但我已经尝试过了——正如我所提到的，我需要使用 100% 的容器宽度将它均匀地分布在容器中，因此我尝试使用空格 - 见我的结果基于您的建议 - imgur.com/YLlT6Lb
您在其中添加了平面列表的容器似乎没有完整的 100% 宽度。如果可能，分享完整代码
是的，容器样式有 flex: 1, width: "100%"，外包装也有 flex: 1, width: "100%" （在白色区域外边距水平你可以请参阅）每个框的宽度 + 高度为 80 -（宽度：80，高度：80）。我需要添加左右边距并使用Dimensions API吗？
你不需要那个，但我认为一些填充或边距被应用到你的平面列表容器或每个渲染项

【解决方案2】：

假设numColumns = 3 和renderItemComponent 是一个组件。那么这就是让它像你想要的那样工作的解决方案

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

【讨论】：

【解决方案3】：

如果这对任何人都有帮助，在我的例子中，列表项容器上的 {flex:1} 样式就是原因。

给项目边框一个颜色让我发现 list-item 上的 {flex:1} 样式使项目平均占用可用空间（最后一行中的 2 个项目平均共享可用空间）。

移除子项样式的 {flex:1} 样式属性使其正确对齐，如下图所示。

【讨论】：