React Native - 居中 flexWrap 内容

Posted 2023-03-07

【中文标题】React Native - 居中 flexWrap 内容

【英文标题】：React Native - centering flexWrap content

【发布时间】：2017-04-16 17:28:31

【问题描述】：

我有一个View，它需要在列表中呈现项目。这些项目需要连续呈现，然后环绕。我可以通过使用flexDirection 和flexWrap 来实现这种行为，如下所示。问题是包裹的行都出现在左对齐，因此在右侧留下了一个未确定的空间。这有点道理，但我想知道是否有办法将flexWrap 创建的每一行中的内容居中？

<View style=alignItems: 'center', justifyContent: 'center'>
  <View style=alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'>
    <Item value=1 />
    <Item value=2 />
    <Item value=3 />
  </View>
</View>

【问题讨论】：

你可以在这里玩弄 flex 并找到正确的值组合来实现你想要的 the-echoplex.net/flexyboxes

你试过加justifyContent: 'center'吗？这将是在flexDirection: 'row' 中用于水平对齐的属性。

感谢您在 flexyboxes 上分享链接。一个非常方便的工具。通过将justifyContent 和alignContent 设置为center，我能够让它在flexyboxes 上工作，但我的项目仍然没有运气。 FWIW，React Native 不支持 alignContent 并将 justifyContent 添加到我的 View 似乎没有效果。

【参考方案1】：

外部alignItems 不知何故妨碍了。我不确定内部工作原理以及为什么会这样，但下面的代码现在可以按预期工作。

<View style=justifyContent: 'center'>
  <View style=alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'>
    <Item value=1 />
    <Item value=2 />
    <Item value=3 />
  </View>
</View>