React Native双列布局：首列固定宽度次列flexGrow未生效如何解决

问题原因 #

在React Native的flexDirection: row布局逻辑中，flexGrow: 1仅负责分配父容器的剩余可用空间，不会限制子元素的最大宽度。当右侧容器内的长文本原始宽度大于父容器剩余宽度时，文本会默认撑开外层容器，最终导致父容器被撑出屏幕、flexGrow看起来没有生效。

修复方案 #

将右侧View的flexGrow: 1替换为flex: 1，或者额外添加flexShrink: 1属性即可：

<View
  style={{
    flex: 1, // 替换原有flexGrow: 1即可
    borderColor: 'gold',
    borderWidth: 3,
  }}>
  <Text style={{fontWeight: 'bold', width: '100%'}}>Lorem ipsum dolor sit amet</Text>
  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
</View>

flex: 1是flexGrow: 1、flexShrink: 1、flexBasis: 0的简写，设置后会强制右侧容器固定占满父容器扣除左侧120px宽度后的所有剩余空间，内部长文本会自动换行适配容器宽度，不会出现溢出。

内容的提问来源于stack exchange，提问作者marielle