如何设置react-native-gifted-chat聊天气泡内的图片尺寸，实现WhatsApp同款展示效果

你需要做三处核心调整即可实现目标效果：

1. 限制聊天气泡的最大宽度，避免长文本把气泡撑到过宽
2. 自定义图片渲染组件，根据气泡可用宽度动态缩放图片尺寸
3. 选图时保存图片原始宽高，用于缩放计算

首先导入依赖并定义全局尺寸常量：

import { Dimensions } from 'react-native'
// 获取屏幕宽度
const { width: screenWidth } = Dimensions.get('window')
// 定义聊天气泡最大宽度，可根据需求调整比例，0.75代表占屏幕宽度75%
const MAX_BUBBLE_WIDTH = screenWidth * 0.75

修改你现有的renderBubble方法，给气泡容器加上最大宽度限制：

const renderBubble = (props) => {
return (
  <Bubble
    {...props}
    textStyle={{
      left: {
        color: '#757575',
      },
      right: {
        color: palette.white,
      }
    }}
    timeTextStyle={{
      left: {
        color: '#BDBDBD'
      },
      right: {
        color: 'white'
      }
    }}
    wrapperStyle={{
      left: {
        borderBottomLeftRadius: 0,
        padding: 10,
        paddingLeft: 0,
        backgroundColor: 'transparent',
        marginLeft: -5,
        maxWidth: MAX_BUBBLE_WIDTH // 新增最大宽度限制
      },
      right: {
        backgroundColor: '#FF7074',
        borderBottomRightRadius: 0,
        padding: 4,
        maxWidth: MAX_BUBBLE_WIDTH // 新增最大宽度限制
      }
    }}
  />
);
};

新增自定义图片渲染方法，实现图片自适应缩放：

const renderMessageImage = (props) => {
  const { currentMessage } = props
  // 图片原始宽高需要在使用imagePicker选图时，存入消息对象的对应字段
  const originalWidth = currentMessage.imageWidth || 200
  const originalHeight = currentMessage.imageHeight || 200
  // 计算图片可用宽度：气泡最大宽度减去左右内边距
  const availableImgWidth = MAX_BUBBLE_WIDTH - 12
  // 计算缩放比例
  const scale = availableImgWidth / originalWidth
  // 最终渲染尺寸：如果原图宽度超过可用宽度就等比缩放，否则用原图尺寸
  const finalWidth = scale < 1 ? availableImgWidth : originalWidth
  const finalHeight = scale < 1 ? originalHeight * scale : originalHeight

  return (
    <Image
      source={{ uri: currentMessage.image }}
      style={{
        width: finalWidth,
        height: finalHeight,
        borderRadius: 8,
        // 存在文本内容时，图片底部预留和文本的间距
        marginBottom: currentMessage.text ? 8 : 0,
      }}
      resizeMode="cover"
    />
  )
}

最后把自定义的renderMessageImage方法传给GiftedChat组件即可：

<GiftedChat
  // 其他原有属性保持不变
  renderBubble={renderBubble}
  renderMessageImage={renderMessageImage}
/>

补充说明：你在调用react-native-image-picker选到图片后，构造聊天消息对象时，需要把返回的图片宽高存入消息的imageWidth和imageHeight字段，用于后续缩放计算。

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