反応ネイティブチャットアプリ "スプリット"チャットバブル

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です。

Answer 2

ビューでフレックスを使用する必要があります。https://facebook.github.io/react-native/docs/flexbox.htmlテキストとイメージに適切なアライメントを付けることもできます。デフォルトではdirectionはカラムなので、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>