web-dev-qa-db-fra.com

Comment justifier (à gauche, à droite, au centre) chaque enfant indépendamment?

En réaction natif j'ai:

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

avec ces styles:

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

C'est l'effet que je reçois:

 undesired

C'est l'effet que je veux:

 desired

Dans le premier exemple, l'espacement entre les éléments est égal.

Dans le deuxième exemple, chaque élément est justifié différemment. Le premier élément est justifié à gauche. Le deuxième élément est justifié au centre. La troisième, justifiée à droite.

Cette question est similaire, mais il semble que rea native ne supporte pas margin: 'auto'. De plus, les autres réponses ne fonctionnent que si vous vous souciez uniquement des justifications gauche et droite, mais personne ne traite vraiment de la justification centrale sans marge automatique.

J'essaye de faire réagir une barre de navigation en natif. La version Vanilla ios ressemble à ceci:

 ios

Comment puis-je faire quelque chose de similaire? Je suis principalement concerné par le centrage.

react-nativeflexbox
30
Croolsby

Une solution consiste à utiliser une vue imbriquée (conteneurs flexibles) pour 3 régions différentes et à définir flex: 1 à gauche et à droite

<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',
  }
});

 enter image description here

44
agent_hunt

Si vous utilisez une barre de navigation du module Navigator, consultez ma question: Modification du style par défaut d'un Navigator.NavigationBar (titre)

2
Mark Silver

Vous pouvez également définir marginLeft: 'auto' sur le composant du milieu. Il faut le pousser vers la droite. Fonctionne également pour React Native

Source: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

1
to7be