web-dev-qa-db-fra.com

React Native - deux éléments: un à gauche, un au centre

J'ai eu du mal à aligner deux éléments dans les positions suivantes: le premier devrait être sur le côté gauche de la rangée et le deuxième élément doit être au centre de la rangée.

Le code suivant ci-dessous ne centre pas entièrement mon deuxième élément:

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>

            <View style={{ paddingLeft: 10 }}>
                <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
            </View>
            <View style={{paddingRight: 10 }}>
            <Text>
                CENTER
            </Text>
            </View>
            {/* Empty view so that space-between works? */}
            <View
                style={{paddingRight: 10 }}>
            </View>
 </View>

C'était le plus près possible du résultat que je voulais. Cependant, cela ne fait pas l'affaire. Quelqu'un pourrait-il connaître la meilleure façon de mettre en œuvre cela avec succès?

react-nativeflexboxalignmentcenter
7
Georgi Ivanov

Vous devez ajouter flex: 1 à la vue parent et aux vues enfants (tous les enfants auront flex: 1 si vous voulez qu'ils soient tous de taille égale, sinon définissez individuellement la largeur/flex pour chaque vue enfant).

Essaye ça:

      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ flex: 1, paddingLeft: 10 }}>
          <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style={{ flex: 1, paddingRight: 10 }}>
          <Text style={{ textAlign:'center' }}>CENTER</Text>
        </View>
        <View
          style={{ flex: 1, paddingRight: 10 }}>
        </View>
      </View>

Ajoutée style={{ textAlign:'center' }} à Texte au centre Affichez l'enfant pour vous donner une idée de sa position centrale. Vous pouvez le modifier/supprimer.

9
xuhaib
  <View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
        <View style={{width: 50, height: 50}}>
            <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style={{ width: 50, height: 50}}>
            <Text>CENTER</Text>
        </View>
        <View style={{ width: 50, height: 50}}/>
 </View>
0
nish

Quand j'ai appris Android, on m'a dit de ne pas utiliser trop de "couches" de composants. Dans cette philosophie, j'ai décidé d'utiliser 'absolute' propriété à l'élément gauche pour obtenir un résultat plus simple. Dans ce schéma, l'élément "gauche" est presque collé au mur gauche.

<View
    style={{
        height: 50,
        flexDirection: 'row', // a must
        alignItems: 'center', // to make items center vertically.
        justifyContent: 'center' // to make the second item center horizontally.
    }}
>
    <MaterialIcons
        style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
        name='arrow-back'
        onPress={() => {
            navigation.goBack();
        }}
    />
    <Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>
0
Brian Hong