Comment rendre une vue dans une vue sans impact sur le style - javascript, reactjs, react-native

Donc je "m rendis un View cela affichera un certain nombre de composants. Tout se passe comme il se doit quand je ne me sers pas du nestedContainer. Chaque composant est espacé comme il se doit et il est correctement aligné. Maintenant, si j’ajoute le View avec le nestedContainer style, il ne s'applique plus space-around au HandRolledIcon et UserName composant. Comment puis-je contourner ce problème et m'assurer que ces composants de la vue imbriquée utilisent les styles que je veux?

(Cette question est liée à mon autre question qui contient plus de détails)

<View style={styles.container}>
<View style={styles.nestedContainer>
<HandRolledIcon style={styles.hrIcon} />
<UserName style={styles.userName} />
</View>
</View>

container: {
flex: 1,
justifyContent: "space-around",
flexDirection: "column",
alignItems: "center",
},
nestedContainer: {
alignItems: "center",
justifyContent: "space-around",
},
hrIcon: {
alignItems: "center",
},
userName: {
alignItems: "center",
}

Réponses:

En fait, je ne sais pas ce que vous essayez d’atteindre, mais j’ai le sentiment que vous devez perfectionner vos connaissances en matière de flex-box.

Découvrez ces liens, cela pourrait vous aider

• https://tympanus.net/codrops/css_reference/flexbox/
• https://facebook.github.io/yoga/docs/getting-started/

Un moyen de parvenir à votre résultat est de donnerflexGrow: 1 (flex: 1 fonctionne de la même manière dans react-native) à votre conteneur imbriqué, ce qui rendra la vue de votre conteneur imbriqué occuper tout l’espace supplémentaire.

nestedContainer: {
flexGrow: 1,
alignItems: "center", // <--- This can be removed based on your requirements since its already given to the parent view
justifyContent: "space-around",
},

REMARQUE: il ne s'agit que d'un moyen; d'autres moyens pourraient être possibles. Il vous suffit de parcourir les docs flex-box de manière approfondie.