Dans cette conférence, je veux approfondir un peu la flexbox, en particulier en ce qui concerne la façon dont vous l'utilisez dans les applications
React Native.
Si vous savez déjà tout cela, vous pouvez bien sûr ignorer cette conférence.
Donc, pour cela, j'ai préparé une application factice simple et bien sûr, vous
trouvez que ci-joint, c'est une application React Native normale construite avec expo et dans l'application. fichier js ici, ce que j'ai à
la fin est juste une vue avec trois vues là où chaque vue a ensuite un texte avec le
texte un, deux, trois, cela crée simplement des
boîtes avec des couleurs différentes - rouge, bleu et vert et maintenant nous utiliserons flexbox pour déplacer ces
boîtes afin que vous puissiez avoir une idée du fonctionnement de flexbox car c'est si important.
Maintenant, tout
d'abord, par défaut, chaque vue dans React Native, même si vous n'affectez aucun style spécial,
utilise Flexbox et c'est différent du Web par exemple, là si vous avez un div qui serait
votre équivalent à un type de vue, il ne fonctionne pas n'utilisez pas flexbox par défaut.
Dans React Native, c'est le cas, chaque vue organise par défaut ses enfants à l'aide de cette chose
flexbox, flexbox est simplement un terme, est simplement un concept de CSS qui consiste à organiser les éléments enfants
dans un espace unidimensionnel, alors
ici par exemple dans une colonne. C'est aussi un autre défaut, non
seulement chaque vue utilise par défaut flexbox, mais elle organise également par défaut les enfants dans une colonne, donc
de haut en bas. C'est aussi une différence pour le Web
et je ne veux pas trop insister sur ces différences, car bien sûr, vous n'avez pas besoin d'être
un développeur Web pour créer des applications React Native, mais je pense que beaucoup de gens connaissent le développement Web. connaître CSS
flexbox et il est donc logique de parler également des différences. Ainsi, sur le Web, lorsque vous utilisez Flexbox,
non seulement il n'est
pas activé par défaut, mais si vous l'activez
également, la valeur par défaut est d'organiser tous les éléments enfants en ligne et ici, la valeur par défaut
est de les organiser dans un colonne.
Vous pouvez cependant changer cette valeur par défaut, donc dans ce cas sur la vue qui contient mes boîtes, en ajoutant ici
la direction flexible et en la définissant sur la ligne par exemple, vous verrez maintenant que ces trois boîtes sont organisées en
ligne de gauche à droite. Maintenant, en plus de la ligne et de
la colonne, vous avez également l'inverse de la ligne et l'inverse de
la colonne et cela fait aussi ce que le nom implique.
Maintenant, nous avons encore une ligne, mais le premier élément, la boîte rouge est en fait à droite et non plus à gauche, donc
c'est aussi quelque chose que
vous pouvez faire, permettez-moi de revenir à la ligne. C'est donc la première chose que vous puissiez faire.
Une autre chose importante à propos de Flexbox est la taille des éléments enfants, ici j'ai donné à
chaque élément enfant une largeur et une hauteur de 100.
Maintenant, si nous supprimions cette chose de largeur et de hauteur sur chaque élément enfant, alors vous verrez que maintenant nous
avons une très petite ligne ici parce que chaque boîte est maintenant aussi large que son enfant l'exige et seulement
aussi haute que son enfant l'exige, donc chaque case ici
qui contient un nombre est seulement aussi large et haute que le nombre qu'il contient.
Maintenant, vous pouvez également changer cela avec le conteneur Flexbox environnant. Donnons à cela une largeur de disons 300
pixels ou de 80% de la largeur parente, donc dans ce
cas puisque c'est l'élément racine, de la largeur du périphérique et donnons-lui une hauteur de
disons 300.
Si nous faisons cela et maintenant vraiment important, je le fais sur la vue qui contient toutes ces boîtes, je
ne le fais pas sur les boîtes elles-mêmes.
Donc, si nous attribuons cette largeur et cette hauteur à la boîte environnante, vous voyez quelque chose
d'intéressant, la hauteur est supposée pour tous les
éléments, maintenant toutes les vues dans la boîte flexible prennent la hauteur du parent, la largeur n'a aucun impact ici.
C'est aussi un comportement par défaut que vous avez ici, évidemment puisque nous n'avons rien changé.
Le comportement par défaut ici est en effet que les éléments enfants dans une boîte flexible,
donc dans cette vue extérieure ici, sont organisés de telle sorte qu'ils s'alignent le long de l'axe transversal par étirement.
D'accord, c'était beaucoup de termes, qu'est-ce que cela signifie? Maintenant, lorsque vous travaillez
avec flexbox, nous avons deux axes importants. L'axe principal dépend de votre direction de flexion, pour une rangée que nous avons
ici, rangée de direction de flexion, l'axe principal est de gauche à droite. Pour l'inverse de ligne, ce serait de droite à gauche, pour la colonne, ce
serait de haut en bas et pour l'inverse de colonne, ce serait de bas en haut, donc
c'est l'axe principal et ensuite
vous avez également un axe transversal et c'est tout simplement l'opposé de l'axe principal.
Donc, pour une ligne où l'axe principal est de gauche à droite, l'axe transversal serait de haut en bas. Si l'axe principal est de droite à gauche, ce
qui serait le cas pour l'inverse de ligne, alors l'axe transversal serait de bas
en haut.
D'accord, c'est donc le concept d'axe principal et d'axe transversal.
Vous pouvez maintenant organiser vos éléments enfants, donc dans cette vue où nous avons les trois cases comme éléments enfants,
vous pouvez organiser ces éléments enfants le long de cet axe. Vous utilisez justifier le contenu pour organiser les
éléments le long de l'axe principal et vous avez aligner les éléments pour organiser les éléments autour de l'axe transversal.
Maintenant, vous voyez les valeurs que vous avez obtenues pour justifier le contenu ici si vous ajoutez ces
guillemets ou si vous placez votre curseur à l'intérieur et que vous frappez l'espace de contrôle. Vous voyez que vous pouvez centrer les éléments,
vous pouvez les positionner à la fin ou au début de ce conteneur ou vous pouvez ajouter un espace
entre les deux,
par exemple si nous utilisons l'espace entre ici et nous utilisons aligner le centre de l'élément, alors les choses changeront.
Maintenant, vous verrez là prendre la largeur du conteneur environnant, chaque boîte elle-même est encore
assez petite mais elles sont divisées ou elles sont réparties sur la largeur du conteneur parent et
elles ne prennent plus la hauteur car le long de la croix axe, nous les alignons avec les
éléments d'alignement et là, je mets cela au centre.
La valeur par défaut ici est stretch et si je la remets à stretch, alors sans surprise, ils s'étirent sur
toute la hauteur.
Maintenant, si vous voulez vous assurer qu'ils prennent la largeur disponible, vous ne pouvez pas définir l'étirement
ici sur justifier le contenu qui est votre véhicule de positionnement d'axe principal, vous ne pouvez donc pas définir l'étirement ici.
Alors, que pouvez-vous faire à ce sujet?
Eh bien, c'est quelque chose que vous configurez maintenant sur chaque élément enfant lui-même.
Vous pouvez dire à un objet enfant combien d'espace il doit retirer de l'espace qu'il peut potentiellement obtenir. Étirer ici est une sorte de cas spécial, là vous
configurez cela sur l'élément parent, normalement vous configurez
cela sur l'élément enfant.
Donc, par exemple, si je le place au centre maintenant afin que le parent ne dise
pas à l'enfant combien d'espace il doit prendre, alors nous pouvons contrôler complètement l'espace qu'un enfant prend en allant dans le
style enfant et là, vous pouvez ajouter flex , la propriété flex. La propriété flex est appliquée aux éléments qui se trouvent à l'intérieur d'une boîte flexible,
de sorte qu'ils se trouvent à l'intérieur d'une
vue dans ce cas ici et qui peuvent être une vue elle-même mais qui pourraient également être un autre composant comme
un texte par exemple.
Alors maintenant, ici, vous pouvez ajouter flex et vous pouvez le définir sur une valeur de un
par exemple, donc flex doit être un nombre. Si vous définissez cela sur un, ce
que vous verrez, c'est que maintenant le conteneur rouge où j'ai défini flex à 1 prend toute la largeur disponible, il peut obtenir
tellement qu'il laisse suffisamment d'espace pour le conteneur bleu et vert afin qu'ils peut compresser leur contenu dans
la boîte flexible environnante.
Maintenant, nous ne pouvons pas voir les limites du conteneur environnant, mais les limites seraient essentiellement là où l'élément
rouge commence et l'élément vert et ainsi de suite sur l'axe horizontal ici.
Alors maintenant, flex on s'assure que l'élément rouge devient aussi gros que possible, donc
il prend autant d'espace que possible. Par défaut, les vues prennent seulement autant d'espace que leurs éléments
enfants
l'exigent, donc comme ce caractère est requis mais avec flex one, vous changez cela et ils prennent maintenant autant d'espace le long de l'axe
principal, donc le long
de la largeur ici, comme ils peuvent avoir. Pour l'axe transversal, encore une fois, c'est
un cas spécial, vous devez le faire sur le parent. Pour l'axe principal et comme nous avons
une ligne ici, l'axe principal est un axe horizontal de gauche à droite, vous
le faites avec la propriété flex sur un enfant.
Maintenant, bien sûr, vous pouvez également ajouter du flex à d'autres éléments enfants, comme celui du deuxième contenant
bleu contenant les deux,
vous pouvez également y ajouter un flex.
Alors maintenant, j'ai un flex sur le conteneur rouge et un
flex sur le conteneur bleu et ce qui se passe maintenant, c'est que les deux prennent l'espace libre disponible et parmi
ces deux boîtes, l'espace est réparti uniformément et c'est ce que ce nombre indique ici.
Ce nombre est un nombre
relatif, tous les éléments dans la même boîte flexible, avec la propriété flex distribue l'espace disponible en considérant le nombre
que vous attribuez ici et ces nombres sont relatifs les uns aux autres.
Donc, si je donne le conteneur bleu flex deux ici, cela signifie que de l'espace disponible que vous avez
dans ce conteneur environnant, après déduction de l'espace dont chaque élément a besoin pour y insérer son contenu,
le
conteneur bleu prendra deux fois plus d'espace que celui-ci parce qu'ici nous avons flex un, ici
nous avons flex deux,
si nous avions flex trois ici, alors cela prendrait les trois cinquièmes de l'espace libre disponible parce que nous avons
trois plus deux, donc
nous avons 5 segments disponibles pour ainsi dire et ici le conteneur rouge prendrait 3 segments, le
conteneur bleu prendrait 2 segments.
Si nous avons 1 et 2, alors nous avons trois segments disponibles et le conteneur bleu en
prend deux, le rouge en prend un, donc vous additionnez toujours ces nombres flexibles et ensuite vous les distribuez ou c'est fait
automatiquement bien sûr mais l'espace disponible est alors distribué en conséquence.
Alors maintenant, nous allons voir que le conteneur bleu est deux fois plus grand que le rouge ou qu'il
prend deux fois plus d'espace libre que le rouge.
C'est ainsi que vous pouvez travailler
avec flex, vous pouvez organiser la façon dont les éléments sont positionnés avec la direction flex, avec un contenu justifié et
avec des éléments alignés et vous pouvez également faire grandir et rétrécir vos éléments à l'aide de flex.
Alors maintenant, c'est une brève introduction à Flexbox dans React Native, comme je l'ai dit
inspiré par Flexbox pour CSS, donc si vous le saviez, tout ce que j'ai expliqué ici n'est probablement pas
nouveau pour vous.
Nous travaillerons avec flexbox tout au long de
ce cours, donc les choses deviendront plus claires et nous travaillerons beaucoup avec et vous
verrez comment vous pouvez créer de belles interfaces utilisateur avec flexbox, flexbox à la fin est l'outil de React Natif pour structurer votre
contenu sur une page, pour organiser votre contenu et vous travaillerez généralement avec beaucoup de vues que vous imbriquerez également
les unes dans les autres pour que vous puissiez positionner les éléments comme vous le souhaitez, car
bien sûr et c'est
aussi important, vous ne pas juste avoir une vue dans votre application qui utilise flexbox, vous pouvez avoir
une autre vue là-dedans qui utilise également flexbox et en fait comme je l'ai mentionné, chaque
vue utilise par défaut flexbox et vous pouvez ensuite imbriquer ces vues les unes dans les autres afin que vous
positionnez tout comme vous le souhaitez et vous le verrez également dans
ce module déjà et en fait, je le fais déjà ici. Dans mes vues ici qui sont dans la vue environnante,
donc mes cases ici, là j'utilise aussi justifier le contenu et aligner les éléments pour centrer mes numéros dans ces cases, de
sorte que 1, 2 et 3 y soient centrés horizontalement et verticalement et ça marche parce que nous avons flexbox activé
par défaut et nous ne pouvons pas le désactiver d'ailleurs et par conséquent, j'utilise simplement ces deux propriétés ici pour aligner mon
contenu de cette vue le long de l'axe principal et de l'axe transversal et ici puisque je n'ai défini aucun flex spécial pour cette vue, l'axe
principal est de haut en bas car la direction de flexion par défaut est la colonne et l'axe transversal
est de gauche à droite.
Ce n'est qu'une note secondaire.