React Native TextInput超出父View挤压右侧图标问题如何解决？

问题根源 #

在React Native的行向（row方向）Flex布局中，未设置flex约束的文本输入框会随着输入内容增加自动扩展自身宽度，优先保障内容展示，因此会挤压同层级的兄弟元素（即右侧图标按钮）的展示空间，最终超出父容器边界。

修复方案 #

你只需要修改textInput的样式，给它加上flex: 1属性，让它仅占用父容器inputContainer扣除右侧图标宽度后的剩余空间，输入内容超出宽度时会在输入框内部滚动，不会向外扩展：

textInput:{
  flex: 1, // 新增此行
  height: 40,
  fontSize: 18,
  color: Colors.white,
  marginRight: 10, // 可选配置，避免输入文字和右侧图标挨得过近
}

如果仍存在异常，可以额外给textInput加上flexShrink: 1属性，强制输入框在内容超出时优先压缩自身宽度，而非挤压兄弟元素。
另外inputContainer样式中的flex: 1在ScrollView容器下属于无效属性，保留或删除都不会影响本次修复效果，你可根据业务需求自行调整。

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