• Par Harikrishna Kundariya
  • 18-02-2020
  • La technologie
réagir natif

React Native est un framework JavaScript pour la création d'applications mobiles. Ce framework Open-Source a été publié pour la première fois en 2015 par Facebook. Son utilisation principale est de développer des applications Web pour diverses plates-formes comme Android, iOS, UWP et Web.

Flexbox dans React Native
Flexbox a pour fonction de fournir des mises en page cohérentes sur différentes tailles d'écran. Cela fonctionne de la même manière dans React Native que dans CSS pour le Web. Cependant, il a quelques différences.

Fléchir
Cela déterminera comment nos éléments flexibles rempliront l'espace disponible par rapport à l'Axe. Il demanderait au composant de modifier ses dimensions pour remplir l'espace du conteneur dans lequel il se trouve. La propriété Flex sera gardée à l'esprit lors de la division et de l'allocation de l'espace.

Conteneur flexible
Il existe un concept de relation dans la mise en page Flex. Il y a un élément parent qui contient les éléments enfants qui y sont nichés. Cet élément parent est appelé conteneur Flex.

Articles flexibles
Les éléments enfants qui sont nichés dans le conteneur principal sont appelés les éléments Flex.

Par défaut
Le conteneur flexible organise tous les éléments enfants de manière horizontale par défaut. La raison en est la propriété CSS flex-direction qui a la valeur initiale ‘row'. Cette propriété suit la direction de l'axe principal dans le conteneur. Par conséquent, les éléments enfants suivent la direction du conteneur parent. Par conséquent, le changement de direction s'appliquerait à l'axe principal et, à son tour, aux éléments parent et enfant.

1 - Sabma Digital

Exemple:
Prenons un exemple. Nous avons quatre éléments enfants qui sont différenciés à l'aide de couleurs différentes. Voici les proportions dans lesquelles ils sont disposés:

▪ La vue bleu clair utilise flex:1.
▪ La vue orange utilise flex:2.
▪ La vue violette utilise flex:3.
▪ La vue grise (blanc, arrière-plan1, plus sombre 50 %) utilise flex:4.

2 - Sabma Digital

Comme on peut le voir, le bleu clair, l'orange, le violet et le gris obtiennent respectivement 1/10, 2/10, 3/10 et 4/10 de l'espace.

Sens de la flexion
Il décidera de la direction dans laquelle les éléments enfants seront disposés. Il y a deux axes que nous devons connaître :
▪ Axe principal (direction flexible)
▪ Axe transversal (axe perpendiculaire à l'axe principal)

3 - Sabma Digital

Les manières dont l'arrangement peut avoir lieu sont décrites ci-dessous :

Ligne
Lorsque les éléments enfants sont disposés à partir de la gauche, cela s'appelle l'arrangement “Ligne”. Il va de gauche à droite comme le montre la figure 4.

4 - Sabma Digital

Des types de résultats similaires peuvent être obtenus à partir de divers agencements.

Colonne
Lorsque les éléments enfants sont disposés à partir du haut, cela s'appelle l'arrangement “Colonne”. Il va de haut en bas comme le montre la figure 5.

5 - Sabma Digital

Inverser la ligne
Lorsque les éléments enfants sont arrangés à partir de la droite, cela s'appelle l'arrangement ‘Row-Reverse'. Il va de droite à gauche comme le montre la figure 6.

6 - Sabma Digital

Colonne-Inverse
Lorsque les éléments enfants sont arrangés à partir du bas, cela s'appelle l'arrangement ‘Colonne-Inverse'. Il va de bas en haut comme le montre la figure 7.

7 - Sabma Digital

Justifier le contenu
Justifier le contenu détermine comment les enfants s'aligneraient le long de l'axe principal. Vous trouverez ci-dessous des moyens de le faire :

Démarrage flexible
Les éléments enfants sont alignés sur le début de l'axe principal d'un conteneur, comme illustré à la figure 8.

8 - Sabma Digital

Centre
Les éléments enfants sont alignés sur le centre de l'axe principal d'un conteneur, comme illustré à la figure 9.

9 - Sabma Digital

Flex-End
Les éléments enfants sont alignés sur l'extrémité de l'axe principal d'un conteneur, comme illustré à la figure 10.

10 - Sabma Digital

L'espace entre
Les éléments enfants sont régulièrement espacés sur l'axe principal du conteneur. Il répartirait l'espace restant entre les éléments enfants, comme illustré à la figure 11.

11 - Sabma Digital

Espace autour
Les éléments enfants sont régulièrement espacés sur l'axe principal du conteneur. Il répartirait l'espace restant entre les éléments enfants. Cependant, il existe une différence majeure entre Space-Between et Space-Around. Dans Space-Around, il y a de l'espace distribué avant le début du premier enfant et après la fin du dernier enfant comme le montre la figure 12.

12 - Sabma Digital

13 - Sabma Digital

Aligner les éléments
Cette fonction indique comment les enfants doivent être alignés le long de l'axe transversal de leur conteneur. La principale différence entre Aligner les éléments et Justifier le contenu réside dans le fait que ce dernier alignement est le long de l'axe principal, tandis que dans le premier, il est le long de l'axe transversal.
Vous trouverez ci-dessous les différentes manières d'aligner les éléments :

Démarrage flexible
Les éléments enfants sont alignés sur le début de l'axe transversal d'un conteneur.

Centre
Les éléments enfants sont alignés sur le centre de l'axe transversal d'un conteneur.

Flex-End
Les éléments enfants sont alignés sur la fin de l'axe transversal d'un conteneur.

S'étirer
Ce serait la valeur par défaut. Les éléments enfants sont étirés pour correspondre à la hauteur de l'axe transversal d'un conteneur

Ligne de base
Les éléments enfants sont alignés sur une ligne de base commune.

Aligner soi-même
Lorsque nous voulons appliquer l'impact à un seul enfant au lieu de tous les enfants d'un conteneur, vous pouvez lui appliquer alignself pour modifier son alignement dans son conteneur. Il a les mêmes options et effets que Aligner les éléments.

Aligner le contenu
Il existe des options d'alignement du contenu qui décriraient la distribution des lignes le long de l'axe transversal. Cependant, cela n'aurait d'effet que lorsque les éléments sont enveloppés sur plusieurs lignes à l'aide de flexWrap. Les options sont similaires à ce que nous avions dans Align Items.

▪ Flex-Start
▪ Centre
▪ Extrémité flexible
▪ Étirer
▪ Espace entre
▪ Espace autour

Ainsi, il existe diverses possibilités d'alignements en utilisant Flex dans React Native. Embauchez une société de développement d'applications android et ios qualifiée pour comprendre la technologie native de réaction pour les applications mobiles.

Laisser un commentaire