1
00:00:02,310 --> 00:00:08,400
C'est bien sûr à vous de décider comment vous voulez styler ce texte de confirmation ici ou en fait ne

2
00:00:08,400 --> 00:00:15,630
devrait pas être simplement du texte, ce devrait être une vue avec le texte là-dedans qui sort notre numéro et ensuite un bouton pour démarrer

3
00:00:15,630 --> 00:00:21,780
le jeu et vous pouvez certainement faire une pause la vidéo à ce stade et créez votre propre style là-bas, votre

4
00:00:21,780 --> 00:00:23,050
propre mise en page.

5
00:00:23,100 --> 00:00:27,510
J'ai une certaine disposition en tête qui différera certainement de la vôtre, mais il n'y a

6
00:00:27,510 --> 00:00:32,430
pas de mauvaise ou de bonne décision ici, alors prenez certainement cela comme une autre chance de trouver votre

7
00:00:32,430 --> 00:00:36,990
propre disposition pour cela et un bouton qui ne fait rien pour le moment mais c'est là

8
00:00:36,990 --> 00:00:42,520
qui permettrait à l'utilisateur de démarrer le jeu et après une courte pause que vous pouvez utiliser pour mettre la vidéo

9
00:00:42,520 --> 00:00:45,370
en pause, je mettrai en œuvre ma solution avec vous.

10
00:00:45,420 --> 00:00:49,020
Voici donc comment je pense que cela aurait l'air bien.

11
00:00:49,050 --> 00:00:55,640
Je veux avoir une vue pour pouvoir mettre en place un conteneur général autour de cela ou peut-être pas une vue, mais

12
00:00:55,650 --> 00:00:57,720
pourquoi n'utilisons-nous pas notre carte ici, cela

13
00:00:57,720 --> 00:00:59,680
semble être une bonne idée.

14
00:00:59,730 --> 00:01:04,980
Maintenant, cette carte, si nous l'examinons, n'a pas de marge et je veux avoir un peu d'espacement

15
00:01:04,980 --> 00:01:07,950
entre cette carte en haut et ma carte récapitulative.

16
00:01:08,070 --> 00:01:15,540
Donc donc ici, je vais lui donner un style séparé ici dans ma feuille de style, dans l'écran

17
00:01:15,540 --> 00:01:21,570
de démarrage du jeu, je nommerai ce conteneur de résumé, le nom est toujours

18
00:01:21,570 --> 00:01:35,400
à vous et je veux avoir une marge en haut de let disons 20, un bel espacement ici et ajoutez ceci via l'accessoire de style à la carte ici et là, je veux dire

19
00:01:35,400 --> 00:01:44,710
que vous avez sélectionné, puis dans une nouvelle ligne, affichez le nombre d'une manière bien présentée, peut-être le nombre en quelque sorte boîte

20
00:01:44,710 --> 00:01:51,160
avec une bordure séparée avec des coins arrondis pour qu'elle soit clairement visible ou aussi plus

21
00:01:51,310 --> 00:01:56,740
grande que l'autre texte et donc ici, je vais ajouter une vue avec

22
00:01:56,740 --> 00:02:04,070
un texte là-dedans et dans ce texte, j'aurai le numéro sélectionné mais maintenant que La vue et le

23
00:02:04,620 --> 00:02:11,030
texte devraient avoir un style spécial et comme je prévois de le réutiliser, je vais

24
00:02:11,030 --> 00:02:12,690
le récupérer et

25
00:02:12,800 --> 00:02:24,080
l'externaliser dans un nouveau composant et je vais le nommer conteneur de numéros. Dans ce composant, je vais importer React de React et importer la vue et le texte de React Native,

26
00:02:25,300 --> 00:02:33,850
puis avoir le composant de conteneur de numéros ici, exporter le conteneur de numéros par défaut et bien sûr, nous aurons également besoin d'une feuille de style ici, nous

27
00:02:34,090 --> 00:02:41,880
allons donc configurer une feuille de style ainsi qu'avec la feuille de style. créer là-bas et ensuite dans ce composant, je vais

28
00:02:42,360 --> 00:02:49,320
retourner cette vue ici avec le numéro sélectionné qui doit cependant être passé et je m'attends à

29
00:02:49,530 --> 00:02:55,140
ce qu'il l'ait entre les balises d'ouverture et de fermeture de mon propre composant

30
00:02:55,320 --> 00:02:57,800
à l'aide de accessoires enfants.

31
00:02:57,870 --> 00:03:02,270
Maintenant, ce conteneur est bien sûr quelque chose que vous

32
00:03:02,370 --> 00:03:11,590
pouvez configurer librement, j'ajouterai juste un style de conteneur, le nom du conteneur ici où je pense qu'une largeur de bordure de deux

33
00:03:11,650 --> 00:03:20,650
pourrait sembler bonne, donc un peu plus large, une bordure plus large. Une couleur de bordure où je veux réellement utiliser ma couleur primaire ou

34
00:03:20,680 --> 00:03:23,670
ma couleur d'accent, nous verrons laquelle semble meilleure.

35
00:03:23,770 --> 00:03:33,400
Importons donc les couleurs à partir des constantes / Couleurs et de la couleur de la bordure, puis utilisons l'accent des couleurs pour

36
00:03:33,400 --> 00:03:39,670
l'instant et voyons à quoi cela ressemble. Un peu de rembourrage pour que le numéro

37
00:03:39,670 --> 00:03:42,070
ne soit pas directement sur les

38
00:03:42,080 --> 00:03:49,630
bords de la boîte qui l'entoure, ne se trouve pas directement à côté de la bordure, un rayon de bordure de

39
00:03:49,630 --> 00:03:50,440
10 pour

40
00:03:50,440 --> 00:03:56,940
avoir des bordures arrondies, des coins arrondis excusez-moi, d'ailleurs si vous voulez voulez cibler des coins individuels,

41
00:03:57,120 --> 00:04:06,780
vous pouvez le faire avec le rayon en haut à gauche de la bordure, le rayon en haut à droite, l'extrémité supérieure et le début en haut

42
00:04:06,780 --> 00:04:13,980
prend également en compte les paramètres de l'utilisateur pour savoir s'il s'agit d'une langue de gauche à droite ou de

43
00:04:13,980 --> 00:04:22,820
droite à gauche afin que vous puissiez cibler tous les individus coins ou définissez un rayon pour tous les coins avec un rayon de

44
00:04:23,340 --> 00:04:32,120
bordure et ajoutez également une petite marge ici, une marge verticale de 10 peut-être pour avoir un certain espacement en haut et en bas

45
00:04:32,300 --> 00:04:40,340
autour de ce conteneur ici et aussi important, centrez le texte là-dedans avec aligner le centre de l'élément et justifier le centre

46
00:04:40,340 --> 00:04:48,740
du contenu en tirant parti de ce comportement de boîte flexible. Et avec cela, je veux aussi donner le numéro lui-même, donc le texte un

47
00:04:48,740 --> 00:04:57,230
certain style et ce style est que je donne aussi au texte cette couleur d'accent et je veux utiliser une taille de police de 22 pour vraiment se

48
00:04:57,230 --> 00:05:04,280
démarquer et plus tard , nous utiliserons également une police personnalisée. Et puis cette vue ici obtient le style

49
00:05:04,280 --> 00:05:13,830
de conteneur et le texte ici reçoit bien sûr le style numérique. Avec cette configuration, nous pouvons utiliser le conteneur de numéros dans l'écran

50
00:05:13,830 --> 00:05:19,740
de démarrage du jeu, donc là, nous ajoutons simplement cette importation et ce que nous faisons

51
00:05:19,740 --> 00:05:25,000
ici est assez normal, que vous avez plusieurs composants dont vous composez votre application.

52
00:05:25,160 --> 00:05:31,560
Alors maintenant, nous pouvons utiliser le conteneur de numéros dans le composant de l'écran de démarrage du jeu, l'ajouter ici en dessous de ce

53
00:05:32,010 --> 00:05:38,160
texte et dans le conteneur de numéros, nous obtenons le contenu ici avec les accessoires enfants, nous le sortons avec les accessoires enfants,

54
00:05:38,220 --> 00:05:41,190
cela signifie que nous devons le passer entre les balises

55
00:05:41,250 --> 00:05:44,370
d'ouverture et de fermeture, donc ici, nous transmettons le numéro sélectionné.

56
00:05:44,580 --> 00:05:48,710
Maintenant, c'est juste ma suggestion sur la façon dont nous pourrions styler cela, mais j'aime

57
00:05:48,900 --> 00:05:54,630
le style et pour le moment, j'ajouterai un bouton ici qui est une balise à fermeture automatique, le bouton intégré avec

58
00:05:55,080 --> 00:06:02,890
un titre de début de jeu, tous des bouchons pour le faire vraiment ressortir et enregistrer cela et maintenant si nous choisissons un nombre ici, c'est ce que nous

59
00:06:02,940 --> 00:06:08,820
obtenons et ça n'a pas l'air trop moche je dirais. Pourtant, il y a deux choses que

60
00:06:08,820 --> 00:06:15,060
je veux changer, ce texte ici devrait être centré et cette case avec le numéro ne devrait

61
00:06:15,330 --> 00:06:22,120
pas être aussi large que la case environnante mais être seulement aussi large que le nombre en a besoin.

62
00:06:22,860 --> 00:06:30,260
Maintenant, pour que les deux fonctionnent, je vais aller sur ma carte qui contient tout le contenu ici et

63
00:06:30,260 --> 00:06:33,900
avec ça, je veux dire que je vais dans

64
00:06:34,040 --> 00:06:35,480
le style de

65
00:06:35,750 --> 00:06:45,400
l'écran de démarrage que j'utilise également sur cette carte, c'est mon conteneur de résumé et là nous peut aligner les éléments à centrer, au lieu

66
00:06:45,400 --> 00:06:52,280
d'utiliser la valeur par défaut qui serait stretch et maintenant celle-ci est automatiquement centrée et la boîte n'est

67
00:06:52,280 --> 00:06:54,610
plus large que le nombre l'exige.

68
00:06:54,700 --> 00:06:57,360
Maintenant, cela ne semble pas trop minable, une dernière

69
00:06:57,370 --> 00:07:03,160
chose que je viens de remarquer est également que lorsque nous confirmons une entrée, je veux également utiliser l'API

70
00:07:03,190 --> 00:07:09,940
du clavier pour fermer le clavier afin que dès que nous appuyons sur confirmer ici, nous fermions également le clavier et maintenant

71
00:07:10,180 --> 00:07:12,220
nous avons une belle sortie ici.

72
00:07:12,220 --> 00:07:16,180
Maintenant, avec cela, nous avons une apparence de base solide, je dirais, nous

73
00:07:16,180 --> 00:07:22,210
pouvons choisir un nombre, nous effectuons une validation grossière pour nous assurer que nous avons un numéro valide et la

74
00:07:22,210 --> 00:07:28,540
prochaine étape est de faire fonctionner ce bouton de démarrage du jeu et nous échangeons ce que nous voyons ici pour

75
00:07:28,540 --> 00:07:34,540
notre écran de jeu où l'ordinateur fait maintenant des suppositions et nous nous assurons ensuite de donner à l'utilisateur une

76
00:07:34,540 --> 00:07:37,850
chance de dire si les chiffres doivent être supérieurs ou

77
00:07:37,990 --> 00:07:41,770
inférieurs et nous point sont terminés et montrent un jeu sur l'écran.