React Native FlexBox：为啥添加`alignItems`会阻止孩子拥有100％的宽度？

Posted 2023-02-16

【中文标题】React Native FlexBox：为啥添加`alignItems`会阻止孩子拥有100％的宽度？

【英文标题】：React Native FlexBox: Why does adding `alignItems` prevent child from having 100% width?React Native FlexBox：为什么添加`alignItems`会阻止孩子拥有100％的宽度？

【发布时间】：2020-09-02 20:12:19

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

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

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

【讨论】：

完美，谢谢！另一种在不缩小child 的情况下使文本居中的方法是将alignItems: center 设置为child 而不是parent。