React Native - 居中 flexWrap 内容

Question

我有一个需要在列表中呈现项目的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>

- Anshuul Kai

---

你可以在这里尝试灵活盒子的不同组合，找到实现你想要的效果的正确数值。http://the-echoplex.net/flexyboxes/ - diedu

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

感谢分享关于flexyboxes的链接。这是一个非常方便的工具。我已经通过将justifyContent和alignContent设置为center来使其在flexyboxes上运行，但在我的项目中仍然没有成功。值得一提的是，React Native不支持alignContent，并且将justifyContent添加到我的View似乎没有任何效果。 - Anshuul Kai

Answer 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>

- Anshuul Kai