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

Question

我正在使用 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

Answer 1

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

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

}