如何通过反应原生天才聊天设置气泡中显示的图像尺寸？

Posted 2023-02-16

【中文标题】如何通过反应原生天才聊天设置气泡中显示的图像尺寸？

【英文标题】：How to style the image dimensions displayed in the bubble with react native gifted chat?

【发布时间】：2021-12-15 20:14:23

【问题描述】：

我正在使用 react-native-gifted-chat 和 react-native-image-picker，我正在尝试设置使用图像选择器选择并附加到有天赋的聊天气泡的图像的样式。 当图像与文本一起显示时，如果文本太长，它会扩大气泡，但图像保持相同的宽度和高度。如何使图像与 WhatsApp 上的文本一起显示？

See WhatsApp example screenshot

See react native gifted chat example screenshot

Bellow 是我用来设置聊天气泡样式的渲染气泡方法：

  const renderBubble = (props) => 
return (
  <Bubble
    ...props
    // renderMessageText=message.data.text
    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

      ,
      right: 
        backgroundColor: '#FF7074',
        borderBottomRightRadius: 0,
        padding: 4,
        // width: '46%'
      
    
  />
);

;

enter code here

【参考方案1】：

我通过 react native 有天赋的聊天包使用 renderMessageImage 属性解决了这个问题。

const renderMessageImage =(props) => 
return (
  <MessageImage
    ...props
    imageStyle=
      width: '98%',
      height: Dimensions.get('window').width,
      resizeMode: 'cover'
    
  />
)