javascript - react native 聊天应用程序 "split"聊天气泡

Question

我正在开发一个聊天应用程序，我使用 gifted chat 。我希望我的气泡既包含文本又包含图像。这工作正常，但我对它的分割方式不满意......

我想在左侧显示文本，在右侧显示图像。

目前，我的文字位于图像上方:

这是气泡内容的代码:

<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
  <View>
    <Text style = {styles.titleText}> {title}</Text>
    <Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
  </View>
</TouchableOpacity>

关于如何实现左侧文本和右侧图像的任何想法？

Answer 1

您需要在View上使用flexDirection:https://facebook.github.io/react-native/docs/flexbox.html#flex-direction默认值为column，因此子项垂直堆叠。