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

React Native utilise flexbox pour la mise en page. Dans tous les exemples que j'ai vu, ils font quelque chose comme ceci:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

je suis curieux au sujet de la flex: 1 partie. Basé sur la définition de Chris Coyier ici https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 devrait être identique à flex-grow: 1, mais pour moi, il ressemble à flex: 1 à Réagir Natif est équivalent à display: flex en CSS.

voici un CodePen qui démontre que flex: 1 la façon de Réagir Natif des exemples d'utilisation, il ne fait rien en CSS:

http://codepen.io/johnnyo/pen/BoKbpb

ce n'est pas avant que nous utilisions display: flex dans le CSS jusqu'à ce que flexbox commence à fonctionner:

http://codepen.io/johnnyo/pen/epZXgz

cela signifie donc que flex: 1 à Réagir Natif est équivalent à display: flex dans le CSS?

35
demandé sur Johnny Oshika 2015-09-18 23:42:21

5 réponses

Il y a une grande différence entre CSS flexbox et celui implémenté par Facebook. Beaucoup de choses en commun, mais les valeurs par défaut sont très différentes. Plus précisément:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: attribut n'est utilisé que lorsqu'au même niveau il y a peu de composants avec des valeurs flex différentes (flex: 1, flex: 3) signifie que le second élément doit être 3 fois plus grand que le premier. l'attribut flex est le seul supporté (pas de support grow/shrink).

plus d'info: https://github.com/facebook/css-layout

25
répondu Jarek Potiuk 2016-08-28 14:14:34

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.


Et il y a 3 enfants:

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.

22
répondu wintvelt 2015-09-21 10:59:28

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.

7
répondu Ryo-code 2018-02-27 05:34:35

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.

6
répondu Peter Evan Deal 2017-07-05 14:00:12

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>
0
répondu hamidreza ghanbari 2018-07-18 15:29:34