Existe-t-il un moyen de styliser les éléments (à partir de la vue évaluations ) de manière à ce qu'il y ait automatiquement un espace entre eux? J'ai pensé à imprimer du texte (espaces blancs) mais cela ne semble pas être une solution idéale. Que puis-je faire d'autre?
ratings: {
flexDirection: 'row',
//alignContent: 'center',
alignItems: 'baseline',
},
introContainer: {
alignItems: 'center',
paddingTop: 50,
width: '100%',
},
<View style={styles.introContainer}>
<Text style={styles.name}>{firstName}</Text>
<View style={styles.ratings}>
<Icon name="user" size={moderateScale(20)} />
<Icon name="star" size={moderateScale(13)} />
<Text style={styles.rating}> {rating}</Text>
</View>
</View>
3 Réponses :
ajoutez margin ou padding à l'élément que vous souhaitez lui donner plus d'espace
ou vous pouvez appliquer une largeur à quelques-uns éléments et utilisez
display: flex; justify-content: space-between;
pour qu'ils soient espacés de manière égale
suggérez-vous que je devrais appliquer la largeur à la vue évaluations ou à chaque icône séparément? L'application aux notes, puis l'ajout d'affichage, justify-content ne fonctionnait pas
Ah bon? c'est bizarre ça n'a pas fonctionné. avez-vous défini une largeur suffisamment grande? que se passe-t-il si vous appliquez une largeur à styles.ratings de 300 pixels par exemple?
<₹UPDATE
Désolé, il n'y a pas de support pour grid par défaut dans React Native, donc l'option 3 est rejetée à moins que vous ne souhaitiez utiliser une bibliothèque tierce comme https://www.npmjs.com/package/react-native-responsive-grid
Option 1:
Donnez à l'icône étoile une marge droite et gauche
Option 2:
Ajoutez width et display: flex au style notes et définissez l'espace justifyContent sur -entre ou space-around
Option 3:
Utilisez grid au lieu de flex et définissez un grid-gap
J'ai essayé l'option 2 mais rien n'a changé. Quelle largeur dois-je utiliser? J'ai essayé avec 100. Pour l'option 3, pourriez-vous donner un exemple d'utilisation de la grille? Je n'utilise pas flex right pas donc je ne suis pas ce qu'il faut remplacer
J'ai mis à jour la réponse, vous devez également ajouter display: flex à la vue notes , et en ce qui concerne la grille, je viens de constater qu'il n'y a pas de support pour cela dans RN right maintenant, désolé pour la confusion
Si vous faites référence aux enfants du composant View , vous pouvez essayer d'utiliser:
.ratings > * {
// your css here
}
En utilisant > vous ciblez les enfants directs du sélecteur parent (dans ce cas, le sélecteur de classe .ratings .
* signifie tout type d'enfants élément, bien que vous devriez être plus spécifique si vous le pouvez (tous les enfants doivent être ciblés par la même classe ou être le même élément html)
combinateur enfant css
Vous ne pouvez pas utiliser les sélecteurs CSS par défaut dans React Native
Bonne prise J'ai manqué le réacteur-natif tag