React Native Flexbox实现聊天消息气泡自适应文本宽度问题求解

你当前代码的核心问题是给容器和子视图设置了固定比例的flex属性，强制元素按比例分配宽度，导致气泡无法跟随文本长度自适应，按以下步骤修改即可实现需求：

核心修改点 #

• 删除containerSent的flex: 1属性，避免容器强制占满可用宽度
• 删除两个子View的flex: 3、flex: 1属性，取消子元素固定宽度比例
• 将containerSent的justifyContent: 'space-between'改为justifyContent: 'flex-start'，让文本和右侧时间、图标自然紧贴
• 给文本样式添加flexShrink: 1，保证长文本超出最大宽度时自动换行

修改后代码 #

组件代码

<TouchableOpacity>
  <View style={styles.containerSent}>
    <View>
      <Text style={styles.message}>{item.message}</Text>
    </View>
    <View style={styles.rightArea}>
      <Image
        source={require('../assets/images/check.png')}
        style={styles.image}
      />
      <Text style={{textAlign: 'right', color: 'white'}}>
        {msToTime(item.timestamp)}
      </Text>
    </View>
  </View>
</TouchableOpacity>

样式代码

containerSent: {
  maxWidth: '70%',
  marginTop: 20,
  paddingTop: 20,
  paddingHorizontal: 10,
  paddingBottom: 10,
  borderWidth: 1,
  backgroundColor: '#6F2232',
  borderRadius: 20,
  alignSelf: 'flex-end',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'flex-end', // 保证文本和时间底部对齐
  gap: 10, // 文本和右侧区域的间距，可自行调整；RN版本低于0.71不支持gap的话，删除该行给rightArea加marginLeft: 10即可
},
message: {
  color: 'white',
  fontSize: 15,
  fontWeight: 'bold',
  textAlign: 'left',
  flexShrink: 1, // 长文本自动换行
},
rightArea: {
  flexDirection: 'column',
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
},
image: {
  width: 15,
  height: 15,
  marginBottom: 5,
},

修改后短文本时气泡仅占用内容所需的最小宽度，长文本时最多拉伸到屏幕宽度的70%，文本自动换行，和主流即时通讯应用的气泡效果完全一致。

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