Jak uzasadnić (lewo, prawo, centrum) każde dziecko niezależnie?

Question

W reagować rodzimy mam:

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

z tych stylów:

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

To efekt uzyskać:

To efekt chcę:

W pierwszym przykładzie odstępy między elementami są równe.

W drugim przykładzie każda pozycja jest uzasadniona inaczej. Pierwszy element jest wyrównany do lewej. Drugi element jest wyśrodkowany. Trzeci, wyrównany do prawej.

This question jest podobny, ale wygląda na to, że reaguje natywnie, nie obsługuje margin: 'auto'. Co więcej, inne odpowiedzi działają tylko wtedy, gdy zależy ci tylko na lewicowym i prawym usprawiedliwieniu, ale nikt tak naprawdę nie zajmuje się uzasadnieniem środka bez automatycznego marginesu.

Próbuję ustawić pasek nawigacji w reakcji natywnej. Wersja iOS wanilii wygląda następująco:

Jak mogę zrobić coś podobnego? Zajmuję się głównie centrowaniem.

Answer 1

Jednym ze sposobów jest użycie zagnieżdżonych View (Flex kontenerach) dla 3 różnych regionów i ustawić Flex: 1 do lewej i prawej regionu

<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

Jeśli używasz NavigationBar od Moduł nawigatora zobacz moje pytanie: Changing the default style for a Navigator.NavigationBar (title)