1
00:00:02,240 --> 00:00:04,430
Maintenant, c'est aussi une bonne pratique pour

2
00:00:04,460 --> 00:00:09,440
vous, vous pouvez mettre la vidéo en pause ici et essayer de positionner ces deux boutons côte à côte

3
00:00:09,440 --> 00:00:15,190
par vous-même, seuls les deux boutons, pas l'entrée et les deux boutons mais ces deux boutons devraient être dans un nouvelle

4
00:00:15,200 --> 00:00:17,430
ligne sous l'entrée mais asseyez-vous côte à côte.

5
00:00:17,570 --> 00:00:23,610
Après la courte pause que vous pouvez utiliser pour mettre la vidéo en pause, nous le ferons bien sûr ensemble.

6
00:00:23,650 --> 00:00:25,440
Avez-vous réussi?

7
00:00:25,450 --> 00:00:26,950
Essayons ensemble.

8
00:00:26,990 --> 00:00:34,670
La clé ici est d'utiliser Flexbox et une autre vue car, comme je l'ai mentionné précédemment et comme il est vraiment important de

9
00:00:34,670 --> 00:00:41,530
comprendre, les composants de vue sont votre composant de base pour organiser d'autres composants ou pour être utilisés comme un conteneur

10
00:00:41,530 --> 00:00:43,570
que vous pouvez également styliser

11
00:00:43,600 --> 00:00:49,610
mais ici dans ce cas, pour organiser d'autres composants. Je vais donc déplacer les deux boutons à l'intérieur

12
00:00:49,720 --> 00:00:55,720
de cette vue et maintenant nous pouvons attribuer un style à cette vue et ce style sera

13
00:00:55,750 --> 00:00:59,660
bien sûr défini ici dans notre objet style et je nommerai ce

14
00:00:59,710 --> 00:01:06,400
conteneur de boutons, cela dépend de vous, ce nom et là-dedans, je veux définir une direction flexible de la

15
00:01:06,400 --> 00:01:13,360
ligne pour les faire s'asseoir côte à côte et ensuite, je vais définir justifier le contenu de l'espace entre pour

16
00:01:13,360 --> 00:01:16,330
avoir l'espace libre entre les deux boutons.

17
00:01:16,340 --> 00:01:25,190
Maintenant, ajoutons le style ici à cette vue, le conteneur de boutons de styles et enregistrons ceci et maintenant voici les

18
00:01:25,190 --> 00:01:32,420
boutons, mais pour avoir l'espace libre avoir un effet ici, qui sera encore plus clair sur Android

19
00:01:32,420 --> 00:01:34,900
d'ailleurs, qu'il n'a actuellement aucun

20
00:01:35,000 --> 00:01:37,880
effet, de sorte que l'espace entre n'a

21
00:01:37,910 --> 00:01:41,820
aucun effet, permettez-moi de le montrer rapidement sur Android.

22
00:01:42,030 --> 00:01:42,410
Vous

23
00:01:42,420 --> 00:01:43,890
voyez, il n'y a pas d'espace libre.

24
00:01:43,920 --> 00:01:47,790
La raison en est simplement que nous n'avons pas de largeur affectée à notre conteneur de boutons

25
00:01:47,790 --> 00:01:48,200
et

26
00:01:48,210 --> 00:01:50,100
donc comme vous l'avez appris, cela ne prend

27
00:01:50,370 --> 00:01:52,660
que la largeur des enfants et c'est simplement la largeur

28
00:01:52,710 --> 00:01:53,820
des deux boutons additionnés,

29
00:01:53,940 --> 00:01:56,570
donc il n'y a pas d'espace libre pour ajouter entre les deux.

30
00:01:56,610 --> 00:02:01,410
Nous avons donc un peu d'espace libre entre les deux, nous avons simplement besoin d'attribuer un avec au conteneur de

31
00:02:01,530 --> 00:02:05,800
boutons et maintenant cette largeur dépend de vous. Puisque l'entrée a 80%, nous pourrions

32
00:02:05,820 --> 00:02:14,340
aller avec 80% ici aussi ou peut-être avec 60% pour l'avoir un peu plus étroit que l'entrée ci-dessus, de sorte que les boutons ne

33
00:02:14,400 --> 00:02:20,130
soient pas assis sur les bords de l'entrée mais c'est de bien sûr à vous et

34
00:02:20,130 --> 00:02:21,090
donc

35
00:02:21,090 --> 00:02:27,060
maintenant avec cela si cela se recharge et nous y jetons un œil sur Android en

36
00:02:27,060 --> 00:02:33,390
utilisant cette façon pratique de le fermer et de le redémarrer, maintenant nous devrions voir un peu d'espace

37
00:02:33,390 --> 00:02:34,930
libre entre ces deux

38
00:02:34,950 --> 00:02:36,730
boutons, oui cela semble bon.

39
00:02:36,770 --> 00:02:38,700
Et bien sûr, vous pouvez jouer

40
00:02:38,730 --> 00:02:42,830
avec cela, vous pouvez également ajouter des styles aux boutons, vous pouvez également

41
00:02:42,840 --> 00:02:49,440
ajouter des accessoires de style ici et ajouter une marge à gauche et à droite de chaque bouton, cela aurait

42
00:02:49,440 --> 00:02:50,510
également fonctionné.

43
00:02:50,520 --> 00:02:56,250
Vous pouvez également jouer avec d'autres valeurs ici, comme l'espace autour pour avoir l'espace libre à gauche et à

44
00:02:56,250 --> 00:02:58,710
droite des boutons et pas seulement entre eux.

45
00:02:58,770 --> 00:03:03,000
Ce sont toutes des choses que vous pouvez faire, j'irai avec de l'espace ici et j'aurai un dernier regard sur cela,

46
00:03:03,000 --> 00:03:06,000
mais en fin de compte, c'est bien sûr simplement quelque chose qui vous appartient.

47
00:03:06,030 --> 00:03:11,400
Il est bien sûr important ici que vous compreniez comment vous pouvez réaliser quelque chose à l'aide d'une vue

48
00:03:11,550 --> 00:03:15,390
que vous enroulez autour de vos boutons et de votre flexbox puis et

49
00:03:15,600 --> 00:03:18,900
avec cela, je dirais que nous avons un look décent ici.

50
00:03:19,110 --> 00:03:26,550
Maintenant, une dernière chose, vraiment la dernière chose que je veux encore faire maintenant est de redimensionner ces boutons car ils ne sont pas de taille

51
00:03:26,550 --> 00:03:31,380
égale et je pense que ce serait un peu plus agréable s'ils avaient la même taille.

52
00:03:31,410 --> 00:03:37,920
Maintenant, sur un bouton, vous ne pouvez pas ajouter un accessoire de style et définir une largeur, peu importe

53
00:03:37,950 --> 00:03:40,700
si vous utilisez des styles en

54
00:03:40,710 --> 00:03:44,050
ligne ou l'objet de feuille de style, et c'est quelque

55
00:03:44,100 --> 00:03:51,860
chose que vous devez savoir, c'est pourquoi je le couvre ici, vous devez encapsuler votre bouton dans une vue séparée, comme je le

56
00:03:52,070 --> 00:03:59,270
fais ici, puis donner à cette vue un bouton, par exemple ici, nous pourrions ajouter un bouton de styles, en se référant

57
00:03:59,270 --> 00:04:05,990
à une propriété de bouton là-bas, à chaque vue et là-bas propriété de bouton que j'ajoute maintenant, vous pouvez ajouter

58
00:04:05,990 --> 00:04:08,780
une largeur de disons 40% et ce sera

59
00:04:08,780 --> 00:04:15,440
40% du parent de cette vue, donc 40% de cette vue de conteneur de bouton qui elle-même prend 60% de

60
00:04:16,220 --> 00:04:20,580
toute la largeur disponible et nous pouvons également le faire sur l'autre bouton.

61
00:04:20,600 --> 00:04:28,010
C'est donc quelque chose que vous devez savoir, si vous ajoutez vos vues environnantes ici, autour de vos boutons.

62
00:04:28,010 --> 00:04:34,490
Maintenant, si nous redémarrons à nouveau Android, nous devrions avoir des boutons de taille égale, ce qui bien sûr est

63
00:04:34,580 --> 00:04:36,710
souvent quelque chose que vous voulez.

64
00:04:36,710 --> 00:04:42,980
Bien sûr, vous auriez pu également utiliser une valeur en pixels ici au lieu de valeurs en pourcentage, mais maintenant, je suis

65
00:04:43,220 --> 00:04:44,710
vraiment heureux, je pense

66
00:04:44,780 --> 00:04:48,590
que c'est maintenant vraiment une application qui a l'air bien, se comporte bien

67
00:04:48,710 --> 00:04:51,320
et oui, c'est un bon début avec React Native.

68
00:04:51,320 --> 00:04:57,140
Maintenant, évidemment, il y a tellement plus que nous pouvons apprendre et nous allons plonger, tellement plus que nous pouvons faire en ce

69
00:04:57,140 --> 00:05:02,540
qui concerne le style, car comme déjà mentionné, ce n'est certainement pas la plus belle application que vous ayez jamais construite,

70
00:05:03,110 --> 00:05:05,990
mais nous avons couvert beaucoup de principes fondamentaux importants ici.