各子供を個別に（左、右、中央に）正当化する方法は？

Question

では、ネイティブ反応する私が持っている：これらのスタイルを持つ

<View style={styles.navBar}> 
    <Text>{'<'}</Text> 
    <Text style={styles.navBarTitle}> 
     Fitness & Nutrition Tracking 
    </Text> 
    <Image source={icon} style={styles.icon}/> 
</View> 

を：

：これは私が欲しい効果である

：

{ 
    navBar: { 
     height: 60, 
     flexDirection: 'row', 
     justifyContent: 'space-between', 
     alignItems: 'center', 
    }, 
    navBarTitle: { 
     textAlign: 'center', 
    }, 
    icon: { 
     height: 60, 
     resizeMode: 'contain', 
    }, 
} 

これは私が得る効果であります

最初の例では、項目間の間隔は同じです。

第2の例では、各項目の正当性が異なります。最初の項目は左詰めです。 2番目の項目は中央揃えです。三番目は右寄せです。

This questionは類似していますが、反応ネイティブのように見えますがmargin: 'auto'をサポートしていません。さらに、他の回答は、左右の妥当性だけを気にしている場合にのみ機能しますが、自動マージンを使用しない中央揃えには本当に対処できません。

私はネイティブの反応でナビゲーションバーを作ろうとしています。バニラのiOSバージョンは、次のようになります

はどのように似た何かをするのですか？私は主にセンタリングに関心があります。

Answer 1

一つの方法は、3つのさまざまな地域のために、ネストされたビュー（フレックスコンテナ）を使用し、フレックス設定することです：1を左右の領域に

<View style={styles.navBar}> 
    <View style={styles.leftContainer}> 
    <Text style={[styles.text, {textAlign: 'left'}]}> 
     {'<'} 
    </Text> 
    </View> 
    <Text style={styles.text}> 
    Fitness & Nutrition Tracking 
    </Text> 
    <View style={styles.rightContainer}> 
    <View style={styles.rightIcon}/> 
    </View> 
</View> 

const styles = StyleSheet.create({ 
    navBar: { 
    height: 60, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    backgroundColor: 'blue', 
    }, 
    leftContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-start', 
    backgroundColor: 'green' 
    }, 
    rightContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    rightIcon: { 
    height: 10, 
    width: 10, 
    resizeMode: 'contain', 
    backgroundColor: 'white', 
    } 
}); 

Answer 2

あなたからNavigationBarを使用している場合ナビゲータモジュールは私の質問を参照してください：Changing the default style for a Navigator.NavigationBar (title)