React Native FlexBox：为什么添加 alignItems 会阻止子项具有 100% 的宽度？

Question

在我的 React Native 应用程序中，我有一个父 View 容器，一个包含 Text 元素的子 View。默认情况下，子视图的宽度会拉伸以填充父视图。但是如果我添加 alignItems: 'center'，子项会移动到中心，但它的宽度也会缩小到只适合它包含的文本的宽度。

这是点心。取消注释 alignItems: 'center' 以查看差异：https://snack.expo.io/@gkeenley/alignitems-example

有人知道为什么会这样吗？

Answer 1

child 没有明确的宽度，因此它的宽度通常刚好足以包围它包含的文本，这就是设置 alignItems 时您所看到的至 'center'。您之前看到它占据整个宽度的原因是 alignItems 的默认值是 'stretch'，这导致 child 的正常宽度无关紧要，而是被拉伸以占用全部 space.

如果您希望 child 在您居中的版本中更大一些，您可以给它一个明确的宽度：

child: {
  height: '100%',
  width: '50%',
  backgroundColor: 'red'
}

...或使用填充在文本周围放置一些额外的分隔符。

child: {
  height: '100%',
  padding: 5,
  backgroundColor: 'red'
}

React Native FlexBox：为什么添加 alignItems 会阻止子项具有 100% 的宽度？

React Native FlexBox: Why does adding `alignItems` prevent child from having 100% width?

css

flexbox

reactjs

react-native

react-native-flexbox