flex vs flexGrow vs flexShrink vs flexBasis dans React Native ?

Question

J'ai finalement mis à jour react native à 0.42 qui inclut l'introduction de flexGrow , flexShrink y flexBasis et le changement (ou la fixation) de la façon dont flex est rendu.

Je continue à avoir des erreurs comme :

La vue a été rendue avec une largeur/hauteur explicitement définie mais avec une flexBasis de 0. (Cela peut être corrigé en remplaçant flex : par flexGrow :) View :

Quelqu'un peut-il expliquer la différence entre flex: 1 vs flexGrow: 1 . Si j'applique l'un ou l'autre à une vue, il semble que les effets soient différents, mais ne devrait-il pas en être de même ?

Answer 1

Voici quelques codes de test à considérer :

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>

        <View style={{flex: 0, backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1 (17px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
    </View>;
}

Voici une capture d'écran du code ci-dessus :

Ajouté width y height :

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{flex: 0, backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
        <View style={{flex: 0, width: 700, height: 20, backgroundColor: "yellow"}}><Text>flex: 0, width: 700, height: 20 (20px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
        <View style={{flex: 1, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, width: 700, height: 20, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, width: 700, height: 20, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
    </View>;
}

Voici une capture d'écran du code ci-dessus :

flex: 0 (par défaut)

• flex: 0
  • L'élément prend la taille du contenu. Selon le documentation il doit être dimensionné en fixant width y height mais il semble s'adapter aux contenus si ceux-ci ne sont pas définis.
• flex: 0, flexBasis: {{px}}
  • L'élément prend la taille donnée par flexBasis
• flex: 0, flexGrow: 1
  • Avec flex: 0 y flexGrow: 1 c'est la même chose que d'ajouter la taille du contenu (dans l'exemple ci-dessus, il s'agit de a ) à la taille d'un élément qui est réglé sur flex: 1 . C'est similaire à flex: 1, flexBasis: 10 sauf qu'au lieu d'ajouter un nombre de pixels, on ajoute la taille du contenu.
• flex: 0, flexShrink: 1
  • Avec flex: 0 y flexShrink: 1 l'élément semble prendre la taille du contenu, en d'autres termes, c'est la même chose que juste flex: 0 . Je parie qu'il y a des situations où il serait plus important que le contenu, mais je ne l'ai pas encore vu.
• flex: 0, flexGrow: 1, flexBasis: {{px}}
  • C'est la même chose que flex: 0, flexGrow: 1 sauf qu'au lieu d'ajouter la taille du contenu à un flex: 1 il ajoute le nombre de pixels indiqué.
• flex: 0, flexShrink: 1, flexBasis: {{px}}
  • C'est la même chose que flex: 0, flexBasis: {{px}} .
• flex: 0, height: {{px}}
  • Avec flex: 0 , height est traité de la même manière que flexBasis . S'il existe à la fois un height y flexBasis sont fixés, height est ignorée.

flex: 1

• flex: 1
  • L'élément prend l'espace disponible. Voir Documentation sur les accessoires de mise en page pour plus de détails
• flex: 1, flexBasis: {{px}}
  • Avec flex: 1 y flexBasis: {{px}} ; la valeur de flexBasis est ajouté à la taille de l'élément. En d'autres termes, c'est comme prendre un élément flex: 1 et en ajoutant le nombre de pixels défini par l'élément flexBasis . Ainsi, si un flex: 1 est de 50px, et vous ajoutez flexBasis: 20 l'élément sera désormais de 70px.
• flex: 1, flexGrow: 1
  • ignoré
• flex: 1, flexShrink: 1
  • ignoré
• flex: 1, flexGrow: 1, flexBasis: {{px}}
  • C'est la même chose que flex: 1, flexBasis: {{px}} depuis flexGrow est ignorée.
• flex: 1, flexShrink: 1, flexBasis: {{px}}
  • C'est la même chose que flex: 1, flexBasis: {{px}} depuis flexShrink est ignorée.
• flex: 1, height: {{px}}
  • Avec flex: 1 , height est ignorée. Utilisez flexBasis à la place.

Voici mes observations :

• Conseil de dépannage : Assurez-vous que la ou les vues parentales laissent de la place aux enfants pour grandir/rétrécir. Remarquez les flex: 1 sur la vue parent, sans quoi tous les enfants ne s'affichent pas comme prévu.
• Conseil de dépannage : N'utilisez pas Hot Reloading en testant ces valeurs, il peut afficher des éléments de manière incorrecte après plusieurs rechargements. Je recommande d'activer Live Reload ou en utilisant command + r (beaucoup).
• La valeur de flex par défaut est flex: 0 . Si vous n'ajoutez pas de valeur de style flexible, la valeur par défaut est 0.
• Conseil de dépannage : Si vous essayez de comprendre pourquoi quelque chose ne s'affiche pas comme vous le pensez, commencez par l'élément (le plus) parent et assurez-vous qu'il donne suffisamment d'espace à ses enfants pour qu'ils puissent faire ce qu'ils doivent faire. En d'autres termes, essayez de le régler sur flex:1 et voyez si cela vous aide, puis passez à l'enfant suivant et répétez.
• Il semble que width est toujours considéré avec flexDirection: "column" peu importe les autres accessoires flexibles. Il en va de même pour height con flexDirection: "row" .
• Après avoir effectué ces tests, j'utiliserais en général flexBasis en height depuis flexBasis Trump height .