React Native - 居中 flexWrap 内容答案

【问题标题】：React Native - centering flexWrap contentReact Native - 居中 flexWrap 内容
【发布时间】：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 似乎没有效果。

标签： javascript reactjs layout react-native flexbox

【解决方案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>

【讨论】：