1
00:00:02,260 --> 00:00:08,000
Maintenant, nous avons l'apparence de la carte, maintenant, comme prochaine chose, réparons les boutons et c'est quelque chose que je vous ai déjà montré,

2
00:00:08,000 --> 00:00:08,270
donc

3
00:00:08,300 --> 00:00:11,860
certainement votre chance de mettre la vidéo en pause et de le faire vous-même.

4
00:00:11,870 --> 00:00:16,430
Je veux m'assurer que les boutons ont la même taille, ils ne doivent pas prendre toute la

5
00:00:16,760 --> 00:00:22,070
largeur disponible, mais ils doivent avoir une taille égale, ce qui garantit que le texte y tient et qu'il est de

6
00:00:22,280 --> 00:00:22,990
taille égale.

7
00:00:23,000 --> 00:00:30,020
Donc, votre chance de mettre la vidéo en pause, nous le ferons ensuite ensemble. Avez-vous réussi?

8
00:00:30,020 --> 00:00:35,480
Assurons-nous que les boutons ont la même taille et pour cela, dans l'écran de démarrage du jeu où j'ai les boutons,

9
00:00:35,480 --> 00:00:43,070
vous avez appris que la solution consiste à envelopper les boutons dans une vue. Vous devez donc ajouter votre propre composant de vue autour

10
00:00:43,220 --> 00:00:45,200
des boutons et maintenant

11
00:00:45,200 --> 00:00:52,670
vous pouvez attribuer un style à ces boutons, donc aux deux boutons ici et j'utiliserai un objet bouton dans

12
00:00:52,670 --> 00:00:55,190
mon objet styles là-bas, alors ajoutons

13
00:00:55,370 --> 00:01:02,730
un bouton ici et donnez simplement une largeur et ici, une largeur que je vais choisir est disons 80.

14
00:01:02,750 --> 00:01:09,050
Voyons à quoi cela ressemble, si je l'enregistre, un peu trop petit car il semble qu'il y a un saut de ligne

15
00:01:09,260 --> 00:01:10,370
dans ce bouton.

16
00:01:10,370 --> 00:01:16,890
Alors allons-y avec 120, maintenant c'est certainement trop, alors qu'en est-il

17
00:01:16,920 --> 00:01:22,510
de 100 et cela me semble plutôt bien.

18
00:01:22,530 --> 00:01:26,790
Maintenant, en plus et ce n'était pas une tâche pour un utilisateur, pas de soucis

19
00:01:26,910 --> 00:01:31,840
si vous ne le faites pas, je veux changer leurs couleurs et l'une des couleurs devrait être notre

20
00:01:31,950 --> 00:01:37,590
couleur principale et je veux également mettre en place un accent, certains couleurs secondaires pour ainsi dire que nous pouvons utiliser.

21
00:01:40,450 --> 00:01:46,810
Donc, pour cela, dans le composant d'écran de démarrage, sur le bouton lui-même, il y a un accessoire de couleur que

22
00:01:46,810 --> 00:01:48,530
vous pouvez définir pour contrôler

23
00:01:48,550 --> 00:01:54,460
la couleur et pour Android, c'est la couleur d'arrière-plan, pour iOS qui sera la couleur du texte et maintenant

24
00:01:54,780 --> 00:02:00,250
la réinitialisation bouton, là je veux mettre en place une couleur de # 717fc, c'est une belle couleur

25
00:02:00,340 --> 00:02:02,170
je pense et pour le bouton

26
00:02:02,170 --> 00:02:08,170
principal, le bouton de confirmation, je vais utiliser mon thème principal et je veux utiliser la même couleur que j'utilise

27
00:02:08,170 --> 00:02:09,370
dans l'en-tête .

28
00:02:09,370 --> 00:02:12,960
Donc là j'ai ce code hexadécimal utilisé comme couleur de fond, je vais

29
00:02:13,030 --> 00:02:19,090
utiliser la même couleur ici pour ce deuxième bouton maintenant. Avec cela, nous pouvons enregistrer cela et maintenant nous

30
00:02:19,210 --> 00:02:24,050
avons obtenu ces deux couleurs de bouton ici, ce qui semble assez agréable à mon avis.

31
00:02:24,070 --> 00:02:30,660
Maintenant, un inconvénient de cette approche ou une chose que nous pouvons améliorer est que j'utilise ce code hexadécimal ici, je l'utilise

32
00:02:30,670 --> 00:02:34,080
dans l'en-tête et il est probable que plus tard dans l'application, nous

33
00:02:34,090 --> 00:02:37,330
voulons également utiliser la même couleur à d'autres endroits. .

34
00:02:37,330 --> 00:02:41,380
Donc, ce serait bien si nous pouvions définir cela comme une sorte de thème

35
00:02:41,380 --> 00:02:48,340
que vous pourriez dire, que nous pourrions facilement utiliser ces couleurs sans copier les codes hexadécimaux dans notre application et que nous pouvons également

36
00:02:48,340 --> 00:02:53,350
changer la couleur en un seul endroit si nous voulons utilisez une couleur différente et nous n'avons pas

37
00:02:53,350 --> 00:02:55,980
à le faire dans des dizaines de composants.

38
00:02:56,080 --> 00:03:01,830
Et pour cela, j'utiliserai une approche où j'ajouterai un nouveau dossier au niveau racine et je le nommerai des constantes

39
00:03:01,840 --> 00:03:05,440
et comme toujours, vous pouvez nommer ces dossiers comme vous voulez et

40
00:03:05,440 --> 00:03:11,640
là-dedans je veux avoir des couleurs. fichier js. Encore une fois, ce nom peut

41
00:03:11,670 --> 00:03:19,020
également être nommé comme vous voulez, car ce que ce fichier fera, c'est qu'il exportera un objet Javascript par défaut, il exportera un

42
00:03:19,050 --> 00:03:26,760
objet Javascript et là-dedans, vous pouvez avoir toutes les paires clé-valeur que vous voulez et je vais définir une couleur primaire, donc juste primaire

43
00:03:26,820 --> 00:03:32,790
comme nom de clé et cela devrait être ce code hexadécimal que je viens de copier, donc cette

44
00:03:32,790 --> 00:03:37,230
couleur d'en-tête est également accentuée ou secondaire, peu importe ce que vous voulez,

45
00:03:37,230 --> 00:03:42,330
je vais choisir une couleur d'accentuation et cela devrait être cette autre couleur que j'ai

46
00:03:42,330 --> 00:03:47,070
utilisée sur le premier bouton, donc ce code hexadécimal ici, je vais l'utiliser ici.

47
00:03:47,070 --> 00:03:52,920
Maintenant, ces couleurs sont définies ici et nous pouvons maintenant simplement les importer à partir de ce fichier et chaque fois que

48
00:03:52,920 --> 00:03:58,700
nous les changeons ici, elles changent partout dans cette application et nous pouvons donc facilement les échanger pendant le développement.

49
00:03:58,740 --> 00:04:07,800
Alors maintenant, dans l'écran de démarrage du jeu, nous pouvons simplement aller de l'avant et importer des couleurs à partir de constantes / Couleurs comme celle-ci et

50
00:04:08,050 --> 00:04:15,720
j'ai donné un C majuscule ici pour indiquer qu'il s'agit d'une collection de valeurs, vous pouvez nommer ce que vous voulez, vous

51
00:04:15,730 --> 00:04:16,900
pouvez également utiliser

52
00:04:16,900 --> 00:04:20,530
un c minuscule, cette dénomination n'a pas d'importance et vous pouvez

53
00:04:20,590 --> 00:04:23,980
maintenant utiliser des couleurs ici pour attribuer vos couleurs.

54
00:04:24,010 --> 00:04:31,570
Donc, pour ce bouton de réinitialisation, nous allons maintenant utiliser une valeur dynamique afin de pouvoir atteindre les couleurs. accent et ici pour le bouton principal, pour le bouton

55
00:04:32,050 --> 00:04:39,080
de confirmation, je vais aller avec les couleurs. primaire et même

56
00:04:39,080 --> 00:04:44,630
dans l'en-tête. Bien sûr, nous voulons maintenant également utiliser cette couleur

57
00:04:45,020 --> 00:04:52,180
et non la coder en dur ici, au lieu d'importer des couleurs à partir de constantes / couleurs et avec celles importées, vous pouvez

58
00:04:52,370 --> 00:04:57,680
également utiliser cela dans une feuille de style, pas seulement en jsx, vous pouvez l'utiliser n'importe où dans

59
00:04:57,680 --> 00:04:59,420
ce fichier après tout, alors

60
00:04:59,420 --> 00:05:05,680
maintenant ici, je ferai référence aux couleurs. primaire. Et si vous enregistrez cela, encore une

61
00:05:05,720 --> 00:05:13,460
fois, nous avons le même aspect qu'avant, mais encore une fois d'une manière plus élégante où si vous décidez que votre couleur d'accentuation ne doit pas être

62
00:05:13,460 --> 00:05:19,790
cette couleur mais doit être bleue, il vous suffit de l'échanger ici, votre application est reconstruit et vous avez un bouton bleu.

63
00:05:19,910 --> 00:05:26,630
C'est donc l'énorme avantage de gérer vos couleurs ou d'autres constantes de base dans de tels fichiers, vous pouvez avoir un autre fichier

64
00:05:26,630 --> 00:05:34,910
nommé texte par exemple où vous avez des tailles de police de base ou un autre espacement de fichier où vous stockez des valeurs par défaut pour les marges

65
00:05:34,940 --> 00:05:41,000
ou le remplissage afin que vous ne pas avoir à utiliser manuellement les mêmes valeurs encore et encore, ce sont toutes

66
00:05:41,000 --> 00:05:42,550
des approches que vous

67
00:05:42,620 --> 00:05:47,690
pouvez utiliser pour vous faciliter la vie en tant que développeur et pour avoir du code où

68
00:05:47,690 --> 00:05:50,900
vous pouvez rapidement échanger des valeurs si vous en avez besoin.

69
00:05:50,990 --> 00:05:56,360
Pour l'instant, je vais juste gérer mes couleurs là-dedans parce que c'est l'une des choses les plus ennuyeuses

70
00:05:56,360 --> 00:06:01,490
à copier et c'est une très bonne approche donc de la gérer dans un tel fichier.