Come giustificare (a sinistra, a destra, al centro) ogni bambino in modo indipendente?

Question

In reagire nativo che ho:

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

con questi stili:

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

Questo è l'effetto che ottengo:

Questo è l'effetto che voglio:

Nel primo esempio, la spaziatura tra gli elementi è uguale.

Nel secondo esempio, ciascun elemento è giustificato in modo diverso. Il primo elemento è giustificato a sinistra. Il secondo elemento è giustificato al centro. Il terzo, giustificato a destra.

This question è simile, ma sembra che il reagire nativo non supporti margin: 'auto'. Inoltre, le altre risposte funzionano solo se ci si preoccupa solo della giustificazione destra e sinistra, ma nessuno si occupa veramente della giustificazione centrale senza margine automatico.

Sto cercando di rendere una barra di navigazione in modalità nativa. La versione ios vaniglia assomiglia a questo:

Come posso fare qualcosa di simile? Sono principalmente interessato al centramento.

Answer 1

Un modo è quello di usare nidificato View (contenitori Flex) per 3 diverse regioni e impostare flex: 1 a regione a destra ea sinistra

<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

Se stai usando un NavigationBar dal Modulo di navigazione vedere la mia domanda: Changing the default style for a Navigator.NavigationBar (title)