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

Question

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

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

有谁知道为什么会发生这种情况？

Answer 1

子项没有明确的宽度，因此它的宽度通常足以包围它包含的文本，这就是您在设置为 时看到的alignItems内容'center'。您之前看到它占据整个宽度的原因是，默认值alignItems是'stretch'，这会导致子元素的正常宽度无关紧要，而是被拉伸以占据所有空间。

如果您希望子项在居中版本中更大，您可以为其指定明确的宽度：

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

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

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