1 00:00:02,390 --> 00:00:05,610 Donc, étape par étape, nous progressons, ce que nous ne 2 00:00:05,660 --> 00:00:08,150 pouvons pas faire, c'est entrer un nombre. 3 00:00:08,150 --> 00:00:14,090 Eh bien, je suppose que techniquement, nous pouvons entrer un nombre si nous trouvons le champ de saisie, le voici, mais ce n'est pas très 4 00:00:14,090 --> 00:00:17,920 amusant de le rechercher, ce serait plus agréable si vous pouviez le voir, n'est-ce pas? 5 00:00:18,680 --> 00:00:22,270 Donc, par conséquent, stylisons ce champ de saisie, ce 6 00:00:22,280 --> 00:00:30,470 champ de saisie de texte ici un peu et comme auparavant, je suis allé le faire dans un composant 7 00:00:30,470 --> 00:00:31,260 distinct. 8 00:00:31,310 --> 00:00:40,520 Donc, dans le dossier des composants, je vais ajouter ma propre entrée. fichier js et là-dedans, comme toujours importer React à partir de React, puis importer 9 00:00:40,520 --> 00:00:46,580 une entrée de texte à partir de React Native et ici, je n'aurai en fait pas besoin de 10 00:00:46,580 --> 00:00:51,970 la vue parce que nous aurons juste l'entrée de texte ici avec style et configurée là-bas, 11 00:00:51,970 --> 00:00:59,880 puis nous aurons le constante d'entrée ici, qui est notre composant fonctionnel, que nous exportons également bien sûr et une chose dont nous aurons 12 00:00:59,880 --> 00:01:01,980 certainement besoin est la feuille de 13 00:01:02,280 --> 00:01:08,550 style, car cela devrait maintenant être stylé ici afin que nous ayons un aspect d'entrée par défaut que nous 14 00:01:08,550 --> 00:01:13,710 pourrions réutiliser dans ce application si nous avions besoin de plusieurs entrées à différents endroits et 15 00:01:13,710 --> 00:01:15,120 c'est vraiment l'état 16 00:01:15,120 --> 00:01:20,130 d'esprit dans lequel vous devez entrer, créer des composants réutilisables afin que vous n'ayez pas 17 00:01:20,130 --> 00:01:26,460 à copier du code ou à vous répéter, mais que vous puissiez facilement partager vos composants et créer facilement les 18 00:01:26,460 --> 00:01:32,700 applications vous voulez à partir de votre ensemble de blocs de construction que vous créez vous-même à la fin. 19 00:01:32,700 --> 00:01:41,650 Alors ici, mes styles s'obtiennent avec Stylesheet. créer, comme ça, semble bon et maintenant dans ce composant, je 20 00:01:41,710 --> 00:01:44,230 veux retourner une entrée de 21 00:01:44,230 --> 00:01:46,990 texte, donc cette entrée de texte intégrée. 22 00:01:46,990 --> 00:01:49,830 Maintenant, bien sûr, mon idée est que nous pouvons 23 00:01:49,870 --> 00:01:58,180 le styler à partir d'ici, alors attribuons un style à partir de là mais tout comme avec la carte, ce serait bien si nous pouvions également définir un style de 24 00:01:58,180 --> 00:02:05,200 l'extérieur, comme une largeur spéciale ou une frontière spéciale, quelque chose comme ça. Pour activer cela, je vais de nouveau passer un 25 00:02:05,380 --> 00:02:08,050 objet ici pour le style et 26 00:02:08,050 --> 00:02:14,470 pour commencer prendre tous mes styles mis en place dans mon objet styles et là disons dans 27 00:02:14,470 --> 00:02:23,970 une propriété d'entrée que nous devons encore ajouter et en plus, ajouter également tous les styles que nous proviennent du style des accessoires afin que nous 28 00:02:23,970 --> 00:02:30,060 puissions également définir des styles de l'extérieur et maintenant dans la feuille de style, nous pouvons 29 00:02:30,060 --> 00:02:37,180 ajouter le style d'entrée pour attribuer un style à l'entrée. Donc ici, nous pourrions donner à cela une hauteur de disons 30 30 00:02:37,180 --> 00:02:43,420 qui devrait être une hauteur qui semble relativement bonne et pour voir quelque chose, je veux également ajouter une bordure en bas. 31 00:02:43,450 --> 00:02:49,120 Vous pouvez également ajouter une bordure autour de l'entrée entière avec la couleur et la largeur de la bordure et ainsi 32 00:02:49,310 --> 00:02:54,970 de suite, mais j'aime ce look où nous n'avons qu'une bordure en dessous de l'entrée, mais c'est bien sûr totalement subjectif 33 00:02:55,060 --> 00:02:59,120 et quelque chose que vous pouvez configurer en fonction de vos préférences personnelles . 34 00:02:59,250 --> 00:03:06,160 Seule une bordure en bas peut être définie avec la couleur du bas de la bordure et là, j'irai 35 00:03:06,160 --> 00:03:16,110 avec le gris, une autre couleur prédéfinie que nous pouvons utiliser avec ce raccourci et donner à ce bas de la bordure également une largeur ici d'un, 36 00:03:16,110 --> 00:03:22,680 ajouter une marge verticale de 10 pour avoir un certain espacement autour de l'entrée, au moins en haut 37 00:03:22,890 --> 00:03:26,380 et en bas et maintenant avec cela, le style 38 00:03:26,400 --> 00:03:28,170 de base pour cette 39 00:03:28,170 --> 00:03:36,660 entrée de texte est fait, maintenant utilisons-le dans l'écran de jeu. Donc, là-dedans, je veux importer ma propre entrée à partir de l'entrée 40 00:03:36,660 --> 00:03:39,890 du dossier des composants, comme ça et remplacer cette 41 00:03:40,930 --> 00:03:46,690 entrée de texte ici par ma propre entrée qui, à la fin, enveloppe bien cette entrée de 42 00:03:46,690 --> 00:03:47,440 texte intégrée. 43 00:03:47,500 --> 00:03:48,510 Donc, utilisez ma 44 00:03:48,510 --> 00:03:52,300 propre entrée, débarrassez-vous de l'entrée de texte là-haut dont nous n'avons plus besoin 45 00:03:52,600 --> 00:03:59,370 et maintenant si nous l'enregistrons, nous la voyons un peu mais elle est très petite, vous pouvez à peine la voir ici sur iOS et 46 00:03:59,410 --> 00:04:04,600 devient plus grand à mesure que vous tapez, ce qui n'est certainement pas ce que nous voulons bien sûr. 47 00:04:04,900 --> 00:04:06,590 Nous n'avons bien sûr pas terminé, 48 00:04:07,200 --> 00:04:09,290 au lieu de styliser la largeur, je 49 00:04:09,300 --> 00:04:10,950 vais aller à l'écran de 50 00:04:10,980 --> 00:04:14,460 démarrage du jeu, donc à l'endroit où nous utilisons l'entrée et configurons 51 00:04:14,460 --> 00:04:19,200 le style ici parce que pour moi, il est logique que nous ayons des informations générales 52 00:04:19,380 --> 00:04:24,720 styles que nous voulons toujours dans le composant d'entrée, quelque chose comme la hauteur ou la bordure, mais 53 00:04:24,720 --> 00:04:25,230 certains 54 00:04:25,350 --> 00:04:28,480 styles spécifiques, comme sa taille, sa largeur, c'est quelque chose que 55 00:04:28,650 --> 00:04:36,150 vous voulez configurer à l'endroit où vous l'utilisez réellement et donc ici, je vais ajouter cette propriété d'entrée dans l'objet de feuille de style de l'écran 56 00:04:36,150 --> 00:04:42,360 de démarrage et peut-être utiliser une largeur de 50 pixels ici, cela devrait bien paraître et l'attribuer à mon entrée personnalisée ici 57 00:04:42,450 --> 00:04:43,760 avec l'accessoire de style. 58 00:04:43,830 --> 00:04:51,840 Donc là, on peut maintenant pointer sur les styles. et avec cela, il aura cette largeur à tout moment et 59 00:04:51,840 --> 00:04:55,380 si nous tapons là, nous ne l'agrandissons plus, 60 00:04:55,380 --> 00:05:00,040 au lieu de cela, nous pouvons simplement simplement faire défiler automatiquement cette entrée. 61 00:05:00,150 --> 00:05:05,760 Maintenant, pour cette entrée spécifique, pour cette disposition spécifique ici, il serait également intéressant que le texte 62 00:05:05,760 --> 00:05:06,500 soit 63 00:05:06,600 --> 00:05:12,330 centré, je pense, pour la plupart des entrées, vous voulez que le comportement par défaut d'écrire de gauche 64 00:05:12,330 --> 00:05:13,220 à droite et 65 00:05:13,260 --> 00:05:20,480 de commencer sur le bord gauche, mais ici je pense un texte centré serait bien et donc dans l'écran de démarrage du jeu 66 00:05:20,480 --> 00:05:23,550 où je veux avoir ce centrage ici, sur cette 67 00:05:23,660 --> 00:05:30,470 entrée, nous pouvons également ajouter la propriété d'alignement du texte et définir cela au centre et maintenant cela centrera ce texte 68 00:05:30,470 --> 00:05:32,330 ici au milieu comme nous tapons 69 00:05:32,330 --> 00:05:35,830 et c'est vraiment sympa de simplement entrer un nombre, comme ça. 70 00:05:36,920 --> 00:05:40,260 En parlant de cela, en ce moment, nous pouvons entrer 71 00:05:40,550 --> 00:05:45,980 quoi que ce soit là-dedans, nous devons donc certainement configurer cette entrée et pour cela, si je vais dans 72 00:05:45,980 --> 00:05:52,250 le composant d'entrée où nous utilisons la saisie de texte, il y a beaucoup de choses que nous pouvons configurer là-bas et 73 00:05:52,250 --> 00:05:59,030 en fait la meilleure ressource est toujours bien sûr la documentation officielle. Là dans la documentation de l'API, si vous allez là-bas et que vous 74 00:05:59,030 --> 00:06:05,990 recherchez la saisie de texte, vous trouverez non seulement une explication, mais vous trouverez également tous les accessoires que vous pouvez y définir et vous pouvez 75 00:06:06,320 --> 00:06:09,230 définir des choses comme si c'est multiligne ou non , quelle 76 00:06:09,230 --> 00:06:11,100 peut être la longueur du texte. 77 00:06:11,330 --> 00:06:13,730 Vous pouvez également définir un texte 78 00:06:13,730 --> 00:06:18,700 d'espace réservé, vous pouvez définir la correction automatique et toutes ces choses amusantes, 79 00:06:18,770 --> 00:06:25,670 alors vérifiez définitivement ces documents pour trouver la propriété spécifique dont vous pourriez avoir besoin pour votre cas d'utilisation. 80 00:06:25,730 --> 00:06:31,970 Je veux pouvoir définir ces accessoires, mais je veux pouvoir les définir à partir de 81 00:06:31,970 --> 00:06:37,640 l'endroit où j'utilise mon entrée personnalisée. Donc, pas d'ici car cela garantirait que nous utilisons la 82 00:06:37,730 --> 00:06:40,150 même configuration pour toutes les entrées que 83 00:06:40,430 --> 00:06:46,550 nous pourrions avoir dans notre application, je veux avoir plus de flexibilité et simplement mettre en place un style de base 84 00:06:46,550 --> 00:06:51,440 ici et configurer l'entrée à l'endroit où nous puis utilisez-le à la place du composant wrapper principal. 85 00:06:51,440 --> 00:06:57,140 La chose cool est React et ce n'est pas React Native, c'est juste React en Javascript normal a une 86 00:06:57,140 --> 00:06:58,200 syntaxe pour ça. 87 00:06:58,460 --> 00:07:05,920 Vous pouvez prendre vos accessoires que vous obtenez et les diffuser sur votre composant comme ceci. 88 00:07:05,920 --> 00:07:11,110 La syntaxe peut sembler un peu étrange, mais en fin de compte, elle prend 89 00:07:11,140 --> 00:07:19,120 tous les accessoires que vous avez, tous les accessoires que vous définissez ici et les ajoute essentiellement à votre composant en tant qu'accessoires. 90 00:07:19,150 --> 00:07:23,600 Maintenant, si vous définissez ensuite d'autres accessoires comme le style et que vous avez déjà un 91 00:07:23,650 --> 00:07:26,020 style ici, ce style remplacera le style que vous 92 00:07:26,040 --> 00:07:31,210 avez ici et c'est en fait ce que je veux parce que si je définis un accessoire de style 93 00:07:31,210 --> 00:07:37,450 sur ma propre entrée de l'extérieur, je définitivement voulez remplacer cela avec cet accessoire de style et ajouter ce style qui est configuré là-bas 94 00:07:37,450 --> 00:07:38,200 à cette 95 00:07:38,200 --> 00:07:43,630 entrée de texte, mais si vous définissez d'autres accessoires en dehors de ce composant, donc sur mon composant personnalisé, ils seront 96 00:07:43,630 --> 00:07:49,010 ajoutés à l'entrée de texte et que nous permet d'ajouter tous les accessoires que nous pouvons ajouter sur la saisie 97 00:07:49,120 --> 00:07:52,120 de texte également sur notre entrée, donc sur notre propre composant. 98 00:07:52,120 --> 00:08:03,400 Donc, ici où nous utilisons l'entrée, nous pouvons maintenant non seulement ajouter le style, mais nous pouvons également ajouter blurOnSubmit par exemple pour nous assurer 99 00:08:03,400 --> 00:08:09,670 que lorsque nous appuyez sur le bouton de soumission là-bas, nous perdons le 100 00:08:09,670 --> 00:08:16,430 focus et nous fermons le clavier virtuel. Nous pouvons définir autocapitalize sur aucun, ce qui est l'une des valeurs 101 00:08:16,480 --> 00:08:20,040 autorisées si vous consultez les documents. Vous pouvez le définir sur aucun, des phrases, 102 00:08:20,050 --> 00:08:24,610 des mots et ainsi de suite, donc je ne veux pas que la capitalisation soit activée ici parce que nous allons simplement entrer 103 00:08:24,610 --> 00:08:30,610 un nombre mais aussi parce que je veux vous montrer différentes configurations que vous pouvez définir. Je vais définir la correction automatique ici sur 104 00:08:30,610 --> 00:08:35,050 faux afin que nous ne corrigions pas automatiquement l'entrée utilisateur et très important 105 00:08:35,080 --> 00:08:41,000 ici, je vais définir le type de clavier sur numérique, afin que l'utilisateur doive entrer un nombre ici. 106 00:08:41,320 --> 00:08:47,590 Je vais définir la longueur maximale ici à 2 afin que vous ne puissiez entrer que deux chiffres et pas un nombre 107 00:08:47,620 --> 00:08:53,890 très long parce que ce jeu ici et ce n'est qu'une des restrictions que j'ai ici, c'est que ce jeu ne 108 00:08:53,890 --> 00:08:57,140 fonctionne qu'avec deux chiffres nombre. Avec tout cela configuré, maintenant 109 00:08:57,140 --> 00:09:02,990 si nous revenons en arrière et que je bascule mon clavier virtuel, vous voyez que vous obtenez ce clavier numérique ici et 110 00:09:02,990 --> 00:09:09,180 vous ne pouvez entrer que deux chiffres là-bas et pas plus que cela, ce qui est bien sûr exactement ce que je veux. 111 00:09:09,260 --> 00:09:14,170 De plus, ici sur Android, nous voyons cela, si vous cliquez sur le bouton de 112 00:09:14,180 --> 00:09:21,140 confirmation, cela le fermera, c'est grâce à cette chose blurOnSubmit. Sur iOS, un tel bouton n'existe pas ici, donc là, nous devrons en 113 00:09:21,140 --> 00:09:25,730 fait trouver une solution différente pour la fermer si vous appuyez ailleurs, par exemple, car pour le moment, 114 00:09:25,760 --> 00:09:27,150 cela ne se produit pas. 115 00:09:27,320 --> 00:09:32,090 Mais la bonne chose est que nous avons maintenant un clavier que nous pouvons voir et un clavier où nous pouvons saisir des chiffres. 116 00:09:32,090 --> 00:09:37,910 Une chose que je veux changer, c'est que pour le moment, je peux également entrer un séparateur décimal ici. 117 00:09:37,910 --> 00:09:44,420 Maintenant, pour vous débarrasser de cela, vous pouvez changer le type de clavier en pavé numérique et voir tous les types de clavier disponibles, comme toujours 118 00:09:44,420 --> 00:09:49,650 les documents officiels sont l'endroit où aller, là pour la saisie de texte, vous pouvez plonger dans un type de clavier 119 00:09:49,650 --> 00:09:54,650 et trouver ce que vous pouvez définir, ce qui fonctionne sur toutes les plates-formes et ce que vous pouvez définir 120 00:09:54,650 --> 00:09:59,480 si vous souhaitez une vérification qui vérifie sur quelle plate-forme vous exécutez le code dont nous n'avons pas encore 121 00:09:59,480 --> 00:09:59,990 entendu parler. 122 00:10:00,230 --> 00:10:03,200 Le pavé numérique est cependant pris en charge sur les deux plates-formes 123 00:10:03,350 --> 00:10:08,380 et si vous le définissez, vous avez maintenant une entrée où vous ne pouvez pas entrer de décimale ici, si vous 124 00:10:08,390 --> 00:10:13,990 tapez ici et vous ne pouvez pas le faire sur iOS. Sur Android, vous pouvez malheureusement le faire, donc nous 125 00:10:14,090 --> 00:10:16,490 devrons également trouver un correctif différent.