React Native Stylesheet: que fait {flex:1}?

une remarque à la réponse de Jarek Potiuk: 'flex: 1' fait quelque chose dans react-native similaire au comportement de flex-grow. Même si il est le seul avec flex: défini.

Styles tels que flexDirection, alignItems, justifyContent tous définissent le style des enfants de l'élément. Similaire à css Display: flex, qui définit également les enfants.

au contraire, flex: x définit l'élément lui-même.

l'enfant 1 a une largeur de 50

l'enfant 2 A flex 1 (ou tout autre nombre, mais 1 est pratique courante)

l'enfant 3 a une largeur de 50

alors le composant du milieu va 's'étirer' de sorte que les 3 enfants ensemble remplissent toute la largeur du composant parent.

beaucoup de tutoriels utiliser flex: 1, un peu comme dans votre exemple. La raison principale est que parfois (selon l'élément, comme ListStyle par défaut, si ma mémoire est bonne) le composant ne prendra pas la totalité de l'écran/zone si vous ne définissez pas les dimensions, telles que la hauteur (par exemple. height: '400px'). Flex: est génial parce qu'il garde les choses sensibles pour différentes tailles.

mais je dois noter que pour tout composant avec pas de frères et sœurs, la valeur de flex est totalement arbitraire. Ex. pour votre composant de haut niveau, vous pouvez dire flex: 43254315 et il fait la même chose que flex: 1. Cela signifie simplement "occuper tout l'Espace" (quel que soit le terme "tout").

en revanche, si vous avez quelques composantes fraternelles, alors la valeur flex compte beaucoup. Par exemple, si un composant est flex: 2 est flex: 3, puis le premier prend 2/5 de l'écran et la deuxième occupe les 3/5 de l'écran.

En bref: en Fonction de vos styles, il pourrait flex: 1 est le même que display: flex, mais c'est seulement parce que de la façon dont vous l'utilisez dans votre exemple. Vous le verrez agir très différemment si vous lui donnez juste quelques frères et sœurs.

comme vous j'ai eu du mal à comprendre cette étiquette qui n'est pas correctement documentée sur le code Facebook, mais j'ai finalement découvert qu'elle fait deux choses:

1. Conteneurs de considérer tous les enfants avec un flex attribut avoir une hauteur de 0 dans le but de déterminer combien d'espace ils prennent.
2. Composants flex: X prendre de l'expansion pour prendre toute pièce restante dans leur contenant après que les autres composants ont été disposés. Ils partagent cet espace supplémentaire dans proportion avec leurs valeurs de X.

le premier point est pourquoi flex: 1 peut semblent avoir le même effet que display: flex. Considérons le code JSX suivant:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

seul le premier composant de texte est imprimé, car le second est considéré comme ayant une hauteur de 0. ExampleAppContainer alloue suffisamment d'espace pour le premier élément de texte, et il n'y a pas de place pour la seconde de s'étendre.

maintenant, considérez ce code:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

Depuis ExampleAppContainer a flex: 1, il s'élargit pour prendre autant de place que possible. En supposant que ce soit le composant racine de la partie React de votre application, ce sera généralement l'écran entier du téléphone. Ensuite, il alloue suffisamment d'espace pour le premier composant texte, et permet au second composant texte de s'étendre, reprenant le reste de l'écran.

Dans ce mode, vous aurez souvent besoin d'appliquer flex: 1 tout le long de la hiérarchie de vos composants afin de permettre à vos composants les plus intimes flex: N la place de se développer correctement.

c'est très simple juste penser que quand vous dites flex: 1 à n'importe quels éléments que l'élément obtiennent toute la hauteur de l'élément parent si cet élément ont flex: 1 et n'ont pas d'élément parent obtiennent toute la hauteur de la taille de l'écran.

par exemple, vous voulez avoir un élément conteneur qui obtient toute la hauteur de l'écran et cet élément ont trois élément enfant que chaque élément ont 1/3 hauteur de l'écran pour cet exemple il suffit d'obtenir l'élément parent flex: 1 et trois éléments enfant flex: 1/3 voir le code soufflet

<View style={{flex: 1,backgroundColor: 'red'}}>

        <View style={{flex: 1/3, backgroundColor: 'green'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'yellow'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'pink'}}></View>

      </View>