React Native中设置容器宽度出现不符合预期的结果

我在React Native中创建了包含<FlatList />的<View style={styles.container}>容器，FlatList渲染的卡片样式如下：

card: {
  borderColor: 'green',
  borderWidth: 2,
  borderTopRightRadius: 7,
  borderBottomRightRadius: 7,
  borderBottomLeftRadius: 7,
  backgroundColor: 'white',
  padding: 5,
  width: '100%',
  height: 290,
},

问题1：为何<View style={styles.thisAffectsCardWidth} />无法水平居中于卡片内？ #

卡片容器默认flexDirection为column，且未设置alignItems: 'center'——在flex布局的垂直排列模式下，交叉轴（水平方向）的默认对齐方式是stretch，但当子元素设置了固定/百分比宽度时，会自动切换为左对齐。要实现水平居中，要么给卡片容器添加alignItems: 'center'，要么给子元素单独设置alignSelf: 'center'。

问题2：当将thisAffectsCardWidth的width属性从50%调整至100%时，卡片<View style={styles.card} />的宽度为何会变大？ #

这是React Native宽度计算的特性导致的：卡片设置的width: '100%'是相对其父容器（FlatList的item容器）的宽度，但如果item容器没有明确的宽度约束，子元素thisAffectsCardWidth设为width: 100%时，会基于卡片的内容宽度（即卡片宽度减去左右padding）计算自身宽度，反向撑开卡片，导致卡片宽度超出原本的100%父容器宽度。解决方式可以是给FlatList的item容器设置明确宽度，或者给卡片添加maxWidth: '100%'限制宽度不会被撑开。

内容的提问来源于stack exchange，提问作者four-eyes