1
00:00:02,470 --> 00:00:05,140
Maintenant que nous avons travaillé sur

2
00:00:05,140 --> 00:00:11,250
le texte ici, nous pouvons maintenant revenir à l'application. js et se débarrasser de ce changement temporaire ici où

3
00:00:11,250 --> 00:00:12,100
nous montrons

4
00:00:12,100 --> 00:00:17,350
toujours le jeu sur l'écran, nous ne voulons plus le faire, au lieu de cela, nous voulons recommencer

5
00:00:17,350 --> 00:00:24,790
avec l'écran de démarrage normal du jeu et en plus de ce changement, j'ai maintenant aussi voulez faire un ajustement supplémentaire et c'est ce bouton de

6
00:00:24,790 --> 00:00:25,720
démarrage du jeu.

7
00:00:25,810 --> 00:00:31,000
Nous utilisons ici le bouton normal, ce qui est bien sûr quelque chose que vous pouvez faire, mais parfois vous voulez

8
00:00:31,000 --> 00:00:35,910
également créer votre propre bouton, vous voulez avoir un contrôle total sur l'apparence de votre bouton et pour cela,

9
00:00:36,130 --> 00:00:40,610
vous pouvez bien sûr créer le vôtre bouton et c'est exactement ce que nous allons faire maintenant.

10
00:00:40,950 --> 00:00:45,700
Par conséquent, dans le dossier des composants, j'ajouterai mon propre bouton et vous pouvez le

11
00:00:45,700 --> 00:00:46,390
nommer

12
00:00:46,390 --> 00:00:49,400
comme vous le souhaitez, vous pouvez le nommer bouton, mais

13
00:00:49,480 --> 00:00:56,740
c'est déjà le nom de celui intégré et, bien que vous puissiez bien sûr encore nommer le vôtre comme ceci, pour éviter tout

14
00:00:56,740 --> 00:01:04,330
conflit de nom ou confusion, je nommerai mon bouton ici le bouton principal car ce sera mon principal, mon bouton principal que j'utilise pour les

15
00:01:04,330 --> 00:01:05,710
grandes actions de ce

16
00:01:05,710 --> 00:01:07,480
jeu comme démarrer un nouveau jeu.

17
00:01:07,720 --> 00:01:12,730
Maintenant que c'est le nom du fichier, nous aurons bien sûr un composant React normal,

18
00:01:12,730 --> 00:01:14,470
donc nous importons React.

19
00:01:14,590 --> 00:01:18,160
Nous importons une vue ici, nous aurons certainement besoin de

20
00:01:18,160 --> 00:01:23,960
texte, nous aurons certainement besoin d'une feuille de style de React Native comme celle-ci et puis

21
00:01:24,160 --> 00:01:29,990
ici, nous avons le composant bouton principal qui reçoit les accessoires et qui, en fin de

22
00:01:29,990 --> 00:01:35,290
compte, renverra du jsx. Nous aurons notre objet styles avec Feuille de style. créer et comme

23
00:01:35,470 --> 00:01:39,310
toujours, nous allons exporter notre bouton principal.

24
00:01:39,310 --> 00:01:42,100
Et maintenant, la question est de savoir comment créer votre propre bouton?

25
00:01:42,110 --> 00:01:48,640
Maintenant, cela peut sembler très complexe à faire, mais en fait, ce n'est pas le cas. Votre propre bouton est également juste une combinaison

26
00:01:48,640 --> 00:01:56,890
de vue et de texte et très important, également un composant tactile, comme la surbrillance tactile ou l'opacité tactile ou la

27
00:01:56,890 --> 00:02:01,300
rétroaction native tactile ou même tactile sans rétroaction si vous ne

28
00:02:01,360 --> 00:02:06,940
voulez pas donner de rétroaction visuelle. Donc ici, je vais opacité tactile et nous avons

29
00:02:06,940 --> 00:02:13,690
besoin de cela pour donner aux utilisateurs des commentaires sur le fait que le bouton a été pressé et pour enregistrer un événement onPress

30
00:02:14,320 --> 00:02:19,720
et à part cela, nous allons simplement construire notre bouton avec une vue que nous avons stylisée d'une certaine

31
00:02:19,720 --> 00:02:21,370
manière et un texte là-dedans.

32
00:02:21,370 --> 00:02:29,330
Alors maintenant, ici, dans le bouton principal, nous pouvons retourner notre opacité tactile et là-bas, avoir une vue que nous pouvons utiliser pour ensuite styliser

33
00:02:29,330 --> 00:02:34,120
le bouton et là-dedans, peut-être un texte pour un texte qu'un bouton devrait avoir.

34
00:02:34,240 --> 00:02:39,680
Maintenant, disons que notre bouton doit être utilisable de telle sorte que nous ayons passé un texte

35
00:02:39,680 --> 00:02:41,600
directement entre les balises d'ouverture

36
00:02:41,600 --> 00:02:46,030
et de fermeture de notre composant, donc ici nous pouvons utiliser les accessoires

37
00:02:46,300 --> 00:02:55,990
enfants comme le texte que je veux afficher sur le bouton, puis ici sur cette vue, je 'll aura un style de bouton de styles disons, sur ce texte intérieur

38
00:02:55,990 --> 00:03:04,860
ici, nous pourrions avoir un style de style de bouton de style et ces noms sont à vous bien sûr et sur l'opacité tactile, j'ajouterai l'écouteur onPress

39
00:03:04,930 --> 00:03:07,920
et nous je vais devoir faire quelque chose là-bas.

40
00:03:09,000 --> 00:03:11,430
Alors maintenant, nous obtenons le squelette de notre bouton, nous

41
00:03:11,450 --> 00:03:13,700
pouvons maintenant commencer à lui ajouter des styles.

42
00:03:13,790 --> 00:03:18,450
Maintenant, bien sûr, vous pouvez styliser ce bouton de la manière que vous voulez, j'ai un certain

43
00:03:18,470 --> 00:03:20,410
style à l'esprit ici que je

44
00:03:20,420 --> 00:03:24,490
vais ajouter, mais encore une fois, jouez avec cela et appliquez vos propres styles.

45
00:03:24,530 --> 00:03:30,620
Donc, pour le bouton lui-même qui est la vue autour du texte, je veux donner au bouton une certaine couleur d'arrière-plan

46
00:03:30,620 --> 00:03:34,850
et vous pouvez également vous assurer que cela peut être défini de l'extérieur bien

47
00:03:42,270 --> 00:03:48,960
sûr, vous pouvez devenir vraiment créatif ici. Je vais coder en dur une couleur ici en utilisant bien sûr ma constante de couleurs ici. Je vais donc importer des couleurs à

48
00:03:49,100 --> 00:03:55,710
partir de constantes / Couleurs, des couleurs comme celle-ci, puis ici utiliser des couleurs de couleur primaire, la couleur primaire peut-être, comme ça.

49
00:03:55,790 --> 00:04:00,380
C'est donc la couleur d'arrière-plan que ce bouton devrait avoir, encore une fois, vous pouvez également vous assurer

50
00:04:00,380 --> 00:04:04,090
que ce style est défini dynamiquement à l'aide d'un accessoire que vous obtenez de

51
00:04:04,160 --> 00:04:06,290
l'extérieur, mais ici, je le coderai ici.

52
00:04:06,290 --> 00:04:11,180
En plus de cela, le bouton doit avoir un rembourrage afin que le texte ne repose

53
00:04:11,270 --> 00:04:13,130
pas directement sur les bords

54
00:04:13,130 --> 00:04:19,310
du conteneur de bouton, donc de la zone autour du texte mais il y a un certain espacement et vous pouvez

55
00:04:19,310 --> 00:04:22,590
utiliser le même rembourrage dans toutes les directions mais je veux

56
00:04:22,640 --> 00:04:29,300
utiliser un rembourrage vertical de 12, donc pas beaucoup de rembourrage en haut et en bas et un rembourrage horizontal de disons

57
00:04:29,300 --> 00:04:32,550
30, donc beaucoup plus de rembourrage à gauche et à droite.

58
00:04:32,710 --> 00:04:36,830
C'est le bouton, maintenant pour le texte du bouton, il y a aussi la

59
00:04:36,880 --> 00:04:41,500
couleur du blanc qui devrait bien paraître sur notre couleur primaire, vous pouvez aussi utiliser le noir

60
00:04:41,500 --> 00:04:47,290
parce que notre couleur primaire est en fait une couleur où, comme vous pouvez le voir, le blanc et le noir

61
00:04:47,410 --> 00:04:49,480
fonctionne réellement, vous pouvez donc utiliser l'un

62
00:04:49,480 --> 00:04:55,840
ou l'autre, mais je vais utiliser du blanc ici pour le bouton et j'ajouterai une famille de polices open sans pour utiliser cette police

63
00:04:55,840 --> 00:05:01,780
personnalisée là aussi, comme vous l'avez appris, vous devez l'activer chaque texte, il n'y a pas d'héritage, il n'y a pas de

64
00:05:01,780 --> 00:05:07,150
police globale que vous pouvez configurer, chaque texte qui devrait utiliser cette police doit l'obtenir et j'ajouterai une taille de

65
00:05:07,150 --> 00:05:15,840
police de disons 18 pour avoir un plus gros texte ici dans ce bouton . Maintenant, lorsque le bouton est enfoncé, je ne souhaite généralement

66
00:05:15,840 --> 00:05:21,720
pas gérer cet événement de presse à l'intérieur du bouton, mais à l'intérieur du

67
00:05:21,720 --> 00:05:24,990
composant où nous utilisons le bouton.

68
00:05:25,110 --> 00:05:27,160
Je veux donc simplement le transmettre et

69
00:05:27,180 --> 00:05:33,330
pour cela, nous pouvons simplement nous attendre à obtenir une référence de fonction, une fonction de gestionnaire d'événements sur le disons

70
00:05:33,330 --> 00:05:36,490
onPress prop de notre bouton personnalisé, mais vous pouvez nommer

71
00:05:36,510 --> 00:05:41,670
ce prop n'importe quoi, vous pouvez le nommer surClick car dans à la fin, c'est vous qui

72
00:05:41,670 --> 00:05:42,510
utilisez votre

73
00:05:42,600 --> 00:05:48,540
propre bouton et là, il vous suffit de vous assurer de transmettre une référence de fonction d'ajustement, un pointeur d'ajustement

74
00:05:48,540 --> 00:05:54,310
à une fonction de gestionnaire d'événements à onPress ou tout ce que vous nommez prop sur votre propre bouton.

75
00:05:54,360 --> 00:05:55,680
Donc, ce nom

76
00:05:55,680 --> 00:05:58,610
est à vous, utilisons maintenant le bouton principal et utilisons-le

77
00:05:58,610 --> 00:06:02,170
sur l'écran de démarrage du jeu. Là, nous pouvons simplement

78
00:06:02,190 --> 00:06:13,230
l'importer, alors importez le bouton principal à partir de components / MainButton et ce bouton principal est maintenant utilisé ici pour démarrer un nouveau

79
00:06:13,230 --> 00:06:14,170
jeu.

80
00:06:14,230 --> 00:06:16,980
Je vais donc remplacer le bouton ici par le

81
00:06:16,980 --> 00:06:23,610
bouton principal mais gardez à l'esprit que sur ce bouton, j'ai configuré le contenu, le texte à afficher de telle sorte que

82
00:06:23,610 --> 00:06:31,440
c'est en fait le contenu qui est passé entre les balises d'ouverture et de fermeture de notre bouton et donc de retour dans l'écran de démarrage du

83
00:06:31,440 --> 00:06:32,790
jeu, le titre ici

84
00:06:32,790 --> 00:06:38,760
n'est plus transmis sur un accessoire de titre, mais à la place, nous avons maintenant une balise d'ouverture et de

85
00:06:38,760 --> 00:06:42,730
fermeture pour notre propre bouton et nous y ajoutons le jeu de démarrage.

86
00:06:44,110 --> 00:06:50,170
Maintenant onPress est toujours un accessoire que nous laissons ici parce que dans le bouton principal, je transmets l'événement onPress

87
00:06:50,230 --> 00:06:54,520
pour ainsi dire, à la fonction que j'obtiens moi-même sur prop prop ici,

88
00:06:54,520 --> 00:07:00,870
donc nous devons définir l'accessoire onPress sur notre propre bouton et donc avec cela, nous devrions avoir un joli bouton

89
00:07:00,870 --> 00:07:04,500
principal ici, un joli bouton lorsque nous commençons une nouvelle partie.

90
00:07:07,840 --> 00:07:09,280
Essayons ici, voici à

91
00:07:09,310 --> 00:07:13,680
quoi ça ressemble et ça a l'air plutôt sympa à mon avis, un joli bouton.

92
00:07:13,900 --> 00:07:15,080
Je n'ai pas

93
00:07:15,220 --> 00:07:19,360
fini cependant, je veux avoir des coins arrondis sur ce bouton et pour cela,

94
00:07:19,360 --> 00:07:24,640
de retour dans le fichier du bouton principal, nous pouvons bien sûr simplement aller à cette propriété de

95
00:07:24,640 --> 00:07:32,650
bouton ici dans la feuille de style qui est l'objet de style appliqué à notre vue et là, nous pouvons ajouter un rayon de bordure de 25

96
00:07:32,650 --> 00:07:39,210
et si nous le faisons, alors vous verrez que si je reçois maintenant ce bouton, il a maintenant ce joli look ici.

97
00:07:39,450 --> 00:07:45,580
Vous pouvez également l'afficher sur Android, a maintenant des coins arrondis et a cet effet d'opacité agréable lorsque vous

98
00:07:45,580 --> 00:07:46,120
appuyez

99
00:07:46,270 --> 00:07:51,680
dessus et, comme mentionné précédemment, vous pouvez modifier cet effet d'opacité en allant au composant d'opacité tactile

100
00:07:51,730 --> 00:07:58,080
et là, vous pouvez définissez l'opacité active au niveau d'opacité que vous souhaitez avoir lorsqu'elle est enfoncée, par exemple si

101
00:07:58,120 --> 00:07:59,090
vous utilisez une

102
00:07:59,140 --> 00:08:04,040
valeur plutôt élevée ici, alors cet effet est moins fort, maintenant il n'est que légèrement

103
00:08:04,060 --> 00:08:10,930
transparent lorsque nous tapotons dessus et pas aussi transparent que avant. Mais c'est à vous de décider ce

104
00:08:10,930 --> 00:08:11,980
que

105
00:08:11,980 --> 00:08:15,530
vous voulez ici, j'irai. 6 ici pour avoir un effet légèrement

106
00:08:15,610 --> 00:08:21,130
plus fort, mais encore une fois, c'est quelque chose que vous pouvez configurer et en général, ma suggestion serait de jouer avec cela et de

107
00:08:21,130 --> 00:08:28,950
voir comment vous pouvez styler ce bouton, comment vous pouvez vraiment le régler avec précision selon vos besoins. Maintenant, avec le bouton personnalisé ajouté, je veux

108
00:08:28,950 --> 00:08:31,140
également l'utiliser sur le jeu

109
00:08:31,140 --> 00:08:33,170
sur l'écran, donc

110
00:08:33,270 --> 00:08:42,380
là, je vais également importer le bouton principal à partir de composants / MainButton comme ceci, puis ajouter simplement

111
00:08:42,610 --> 00:08:49,110
ce bouton principal ici lorsque nous montrerons notre nouveau bouton de jeu là-bas.

112
00:08:49,120 --> 00:08:53,620
Utilisez le bouton principal à la place, supprimez donc l'accessoire de titre car ce n'est pas

113
00:08:53,620 --> 00:08:55,710
comme cela que nous définissons le

114
00:08:55,720 --> 00:09:02,840
titre sur notre propre bouton personnalisé, nous devons plutôt le passer ici entre les balises d'ouverture et de fermeture de nos balises de composant personnalisées.

115
00:09:03,040 --> 00:09:11,950
Donc donc maintenant ici, cela devrait aussi être plus joli si nous terminons rapidement un jeu ici, essayant de laisser l'ordinateur deviner 33,

116
00:09:11,950 --> 00:09:13,540
nous y sommes et

117
00:09:17,550 --> 00:09:20,730
maintenant nous voyons le joli bouton ici aussi.

118
00:09:20,730 --> 00:09:24,540
Nous voyons également la sortie correcte ici en ce qui concerne le nombre

119
00:09:24,540 --> 00:09:25,440
de tours

120
00:09:25,440 --> 00:09:30,510
qu'il a fallu et le nombre que nous devions deviner et nous pouvons commencer un nouveau jeu par

121
00:09:36,440 --> 00:09:44,900
la suite et le refaire très rapidement, oui, tout cela est vraiment très joli.

122
00:09:44,900 --> 00:09:46,520
La dernière chose que je veux encore faire, c'est que je veux travailler sur ces deux boutons, plus bas et plus grands.

123
00:09:46,520 --> 00:09:48,230
Ils ont l'air un peu

124
00:09:48,290 --> 00:09:54,200
ennuyeux, je dirais, nous pouvons certainement les rendre plus excitants. Maintenant, une façon de les rendre plus excitantes est

125
00:09:54,200 --> 00:09:56,690
que nous utilisons également notre bouton personnalisé.

126
00:09:57,020 --> 00:10:04,710
Donc, bien sûr, ici dans l'écran de jeu, nous pouvons également importer le bouton principal à partir de components / MainButton, donc notre

127
00:10:04,730 --> 00:10:09,650
propre bouton personnalisé et l'utiliser à la place du bouton que nous utilisons actuellement,

128
00:10:09,660 --> 00:10:12,070
qui est intégré. Donc, utilisez

129
00:10:12,200 --> 00:10:17,770
notre propre bouton ici, donc bien sûr, déplacez le titre entre les balises d'ouverture

130
00:10:17,870 --> 00:10:24,710
et de fermeture, donc ici c'est plus bas puis ici pour le deuxième bouton, c'est plus grand et

131
00:10:25,220 --> 00:10:31,610
maintenant cela devrait être un peu plus joli si nous commençons un nouveau jeu ici .

132
00:10:31,640 --> 00:10:35,470
Maintenant, nous utilisons nos boutons personnalisés ici, mais maintenant nous voyons également un problème,

133
00:10:35,590 --> 00:10:39,440
ils sont simplement un peu trop gros, ils sont trop proches les uns des autres,

134
00:10:39,530 --> 00:10:44,540
nous pouvons cependant changer cela en descendant vers le conteneur de boutons et en donnant un peu plus de

135
00:10:44,540 --> 00:10:47,550
largeur, peut-être définir la largeur maximale à 90% ici en fait.

136
00:10:47,560 --> 00:10:53,490
Alors maintenant, si nous essayons à nouveau, oui, cela a l'air un peu mieux, il y a au moins un peu d'espacement entre

137
00:10:53,490 --> 00:10:58,380
les boutons et pour l'instant cela fonctionnera car pour l'instant, nous n'optimisons pas pour toutes les tailles d'écran.

138
00:10:58,530 --> 00:11:04,140
Augmentons également cette largeur ici à 400, afin que nous ayons suffisamment de largeur, nous

139
00:11:04,140 --> 00:11:09,160
utilisons en fait 400 pixels et maintenant cela semble bien ici sur iOS

140
00:11:12,590 --> 00:11:15,880
et également sur Android. Maintenant, cela semble un peu mieux

141
00:11:15,890 --> 00:11:22,700
comme je l'ai mentionné, mais ce ne serait pas aussi bien si nous avions des icônes là-dedans, au lieu du texte parce que le texte fonctionne bien sûr, mais une icône

142
00:11:22,700 --> 00:11:24,650
pourrait également faire l'affaire et nous n'avons pas utilisé

143
00:11:24,650 --> 00:11:30,830
d'icônes jusqu'à présent depuis vous en avez cependant souvent besoin dans les applications mobiles. C'est certainement quelque chose que vous devez également savoir, vous

144
00:11:30,830 --> 00:11:36,980
devez savoir comment travailler avec des icônes, comment ajouter des icônes à l'intérieur de votre application et c'est

145
00:11:36,980 --> 00:11:39,370
donc ce que nous ferons ensuite.