React Native中TextInput挤压IconButton移出屏幕问题求助

我在一个View组件中放置了相邻的TextInput和IconButton组件，给TextInput设置flex-grow: 1让它占据可用的最大宽度。但问题是，当TextInput内的文本长度达到或超过100%宽度时，TextInput会被撑大，进而将IconButton挤出屏幕。我使用的是react-native-paper库，附两张参考图：

相关代码如下：

<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: 2 }}>
        <TextInput
          value={msg.text}
          onChangeText={(value) => setMsg({ ...msg, text: value })}
          mode='outlined'
          placeholder='Message'
          outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
          style={{ flexGrow: 1, marginBottom: 8 }}
          right={<TextInput.Icon icon="camera" />}
        />
        <IconButton
          icon="send"
          mode='contained'
          iconColor='white'
          containerColor='#167BD1'
          size={24}
          onPress={() => console.log('Pressed')}
        />
</View>

这个问题源于TextInput默认未限制自身拉伸行为，在flex布局下内容过长时会优先扩展宽度。可以通过以下方式解决：

• 给TextInput添加flexShrink: 1
  在TextInput的style中加入flexShrink: 1，确保当容器空间不足时，TextInput会收缩而非撑大容器。同时建议添加marginRight: 8，让输入框和按钮之间保持合理间距：

  <TextInput
    value={msg.text}
    onChangeText={(value) => setMsg({ ...msg, text: value })}
    mode='outlined'
    placeholder='Message'
    outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
    style={{ flexGrow: 1, flexShrink: 1, marginBottom: 8, marginRight: 8 }}
    right={<TextInput.Icon icon="camera" />}
  />
  

• 显式设置外层View的flexWrap: 'nowrap'（可选）
  外层View默认flexWrap为nowrap，但显式声明可以确保组件不会换行，配合TextInput的flexShrink，能彻底避免按钮被挤出屏幕：

  <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: 2, flexWrap: 'nowrap' }}>
    // 子组件代码不变
  </View>
  

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