本地聊天应用程序＆＃34; split＆＃34;聊天泡泡

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

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

Answer 2

您需要在视图https://facebook.github.io/react-native/docs/flexbox.html中使用flex。您还可以为文本和图像提供所需的对齐方式。默认方向是列，所以使用flexDirection：＆＃39; row＆＃39; 请使用以下代码。

<TouchableOpacity key={i} style={[styles.mapView,     this.props.mapViewStyle]}>
  <View style={{flex:1,flexDirection:'row'}}>
    <View style={{flex:0.5}}>
        <Text style = {styles.titleText}> {title}</Text>
    </View>

    <View style={{flex:0.5}}>
       <Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
    </View>
  </View>
</TouchableOpacity>