1
00:00:02,230 --> 00:00:08,300
Nous avons donc commencé avec la saisie de texte, pour le moment, nous ne faisons rien avec les valeurs entrées par l'utilisateur, mais

2
00:00:08,350 --> 00:00:14,020
avant de le faire, assurez-vous que le bouton n'est pas en dessous de cette entrée, mais à côté de lui à droite

3
00:00:14,020 --> 00:00:15,520
et pour encore une fois,

4
00:00:15,520 --> 00:00:17,700
nous devons travailler sur la mise en page.

5
00:00:17,710 --> 00:00:21,970
C'est pourquoi j'ai cette vue supplémentaire ici autour de la saisie de texte dans le bouton.

6
00:00:21,970 --> 00:00:27,490
Nous n'en aurions pas besoin, mais maintenant avec cette vue imbriquée, nous pouvons contrôler la façon dont ces deux éléments

7
00:00:27,490 --> 00:00:31,440
sont alignés l'un par rapport à l'autre, en ajoutant à nouveau la propriété de

8
00:00:31,660 --> 00:00:38,980
style ici et maintenant pour la mise en page, pour le positionnement des choses, React Native utilise une boîte flexible que vous pourriez également sachez sur le

9
00:00:38,980 --> 00:00:45,050
Web, au cas où vous ne le feriez pas, vous trouverez ci-joint des ressources qui vous permettront de démarrer avec CSS flexbox.

10
00:00:45,220 --> 00:00:49,840
Vous n'avez pas besoin de connaître Flexbox à l'intérieur et à l'extérieur, mais cela aide à en savoir

11
00:00:49,840 --> 00:00:56,590
un peu, la flexbox fonctionne de telle sorte qu'elle positionne les éléments à l'intérieur d'une vue les uns à côté des autres ou les uns au-dessus

12
00:00:56,800 --> 00:01:00,200
des autres, par défaut les uns au-dessus des autres dans React Native et

13
00:01:00,230 --> 00:01:06,460
vous pouvez changer cela en définissant la direction flexible de la colonne qui est la valeur par défaut à la ligne et en ajoutant

14
00:01:06,880 --> 00:01:12,610
simplement ceci, sur cette vue, nous remplaçons la valeur par défaut qui est la valeur par défaut, c'est pourquoi nous n'avons pas

15
00:01:12,610 --> 00:01:18,430
à la désactiver sur la colonne et maintenant déjà , nous verrons que le bouton dans la saisie de texte est assis côte

16
00:01:18,430 --> 00:01:19,180
à côte,

17
00:01:19,330 --> 00:01:26,100
n'est pas encore très beau, mais ils sont assis côte à côte. Maintenant, pour que cela paraisse mieux, nous pouvons également

18
00:01:26,130 --> 00:01:27,960
en ajouter d'autres, par

19
00:01:28,140 --> 00:01:34,300
exemple, vous pouvez définir comment les choses sont alignées et réparties dans leur ligne ou colonne.

20
00:01:34,650 --> 00:01:41,700
Par exemple, avec justifier le contenu, vous pouvez contrôler la façon dont les éléments sont distribués le long de leur axe

21
00:01:41,700 --> 00:01:45,410
principal et avec la ligne, l'axe principal est de gauche

22
00:01:45,480 --> 00:01:50,570
à droite, si ce serait la colonne, l'axe principal serait de haut en bas.

23
00:01:50,630 --> 00:01:57,980
Alors maintenant, nous pourrions spécifier une valeur et ici mon IDE me donne même l'auto-complétion qui est très pratique,

24
00:01:58,130 --> 00:02:05,210
nous pourrions spécifier une valeur d'espace entre par exemple. Cela signifie que tout l'espace libre restant est entre les deux éléments,

25
00:02:05,210 --> 00:02:07,690
ils ne sont donc plus assis l'un à

26
00:02:07,760 --> 00:02:12,560
côté de l'autre, mais à la place, il y a de l'espace libre entre eux comme vous

27
00:02:12,560 --> 00:02:13,590
pouvez le voir.

28
00:02:14,590 --> 00:02:18,010
Maintenant, nous pouvons également les aligner sur leur

29
00:02:18,060 --> 00:02:23,950
axe transversal, donc l'axe principal de la ligne de direction de flexion était de gauche à

30
00:02:23,950 --> 00:02:31,130
droite, l'axe transversal est alors de haut en bas. Pour la colonne de direction flexible, l'axe principal serait de haut en bas et l'axe

31
00:02:31,130 --> 00:02:32,220
transversal serait de gauche

32
00:02:32,270 --> 00:02:38,750
à droite, donc l'axe transversal est simplement l'opposé de l'axe principal pour ainsi dire. Justifiez les positions du contenu le long de

33
00:02:38,750 --> 00:02:46,910
l'axe principal, avec les éléments d'alignement, vous pouvez contrôler la façon dont les éléments enfants de cette vue sont alignés le long de

34
00:02:46,910 --> 00:02:51,670
l'axe transversal et là, vous avez différentes valeurs, comme par exemple le centre.

35
00:02:51,980 --> 00:02:58,250
Donc, dans ce cas, puisque nous avons une ligne de direction flexible, cela devrait centrer verticalement tous les éléments, ce qui signifie que le bouton est

36
00:02:58,250 --> 00:03:05,230
maintenant plus joli et qu'il est simplement centré là au milieu de cette entrée. Eh bien et maintenant, nous pouvons également augmenter un

37
00:03:05,230 --> 00:03:10,150
peu la largeur de cette entrée en allant à la saisie de texte et

38
00:03:10,150 --> 00:03:17,050
là sur le style, nous pouvons également ajouter une largeur de disons 200, pour lui donner une largeur de 200

39
00:03:17,050 --> 00:03:24,170
pixels, ce qui signifie que c'est maintenant un peu plus grand. Par ailleurs, vous auriez également pu choisir une valeur

40
00:03:24,560 --> 00:03:30,830
de pourcentage comme 80%, ce qui signifie que cela prend 80% de la largeur disponible mise à disposition

41
00:03:30,890 --> 00:03:38,180
par son composant parent, donc par la vue qui l'entoure. Et maintenant, avec cela, nous avons jeté un coup d'œil aux premiers principes

42
00:03:38,450 --> 00:03:44,720
fondamentaux importants, à propos de la mise en page dans React Native et du style, mais pour le moment, nous faisons tout

43
00:03:44,720 --> 00:03:51,040
cela avec ce concept appelé styles en ligne, ce qui signifie que nous mettons en place les styles directement sur les éléments et

44
00:03:51,050 --> 00:03:52,250
ce n'est pas idéal.