chat-native chat приложение «split» chat bubble

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

Вам необходимо использовать flex in View https://facebook.github.io/react-native/docs/flexbox.html Вы также можете указать желаемое выравнивание текста и изображения. По умолчанию используется столбец, поэтому используйте flexDirection: 'row' Используйте приведенный ниже код.

<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>