1 00:00:02,140 --> 00:00:06,630 Maintenant, nous avons commencé à travailler sur l'entrée et cela ne semble pas trop mal, mais nous 2 00:00:06,630 --> 00:00:13,980 voulons nous assurer que les utilisateurs ne peuvent entrer que des chiffres qui ne sont que des chiffres et que nous ne pouvons pas entrer un point ici ou 3 00:00:13,980 --> 00:00:16,440 une virgule ou coller dans des non contenu numérique 4 00:00:16,530 --> 00:00:20,280 et pour cela, nous devons bien sûr valider ce que l'utilisateur a entré ici. 5 00:00:20,550 --> 00:00:27,900 Maintenant, pour valider ce que l'utilisateur a entré, je veux, comme je l'ai déjà montré, enregistrer la valeur 6 00:00:27,900 --> 00:00:28,440 entrée 7 00:00:28,440 --> 00:00:33,510 par l'utilisateur à chaque frappe et la réintroduire dans l'entrée, mais après 8 00:00:33,510 --> 00:00:39,000 chaque frappe, je veux également valider l'entrée à effectuer sûr que nous avons une 9 00:00:39,000 --> 00:00:44,770 valeur valide là-bas, donc essentiellement un nombre. Pour cela tout d'abord, nous devons gérer un 10 00:00:44,860 --> 00:00:54,510 certain état ici dans l'écran de démarrage du jeu, donc je vais importer l'état d'utilisation, puis ici au début de ce composant, je vais configurer mon appel 11 00:00:54,520 --> 00:01:02,180 d'état d'utilisation, alors enregistrez-en état et ce sera la valeur entrée et même si ce sera un nombre plus tard, techniquement, c'est 12 00:01:02,300 --> 00:01:08,000 une chaîne au début car toutes les entrées ne sont qu'une chaîne et vous devez manuellement 13 00:01:08,000 --> 00:01:09,080 la convertir 14 00:01:09,080 --> 00:01:15,170 en un nombre puis si vous le souhaitez. J'ajouterai également une fonction de valeur entrée définie ici, le 15 00:01:15,170 --> 00:01:19,220 deuxième élément que nous récupérons de cet état d'utilisation de tableau nous donne et maintenant 16 00:01:19,430 --> 00:01:25,660 nous pouvons ajouter ici une constante que je nommerai le gestionnaire d'entrée de numéro ou tout ce que vous voulez lui donner. 17 00:01:25,700 --> 00:01:32,830 Cela obtiendra le texte d'entrée et c'est la fonction parce que c'est juste une fonction que 18 00:01:32,830 --> 00:01:40,690 je stocke dans cette constante que je veux connecter à mon entrée et là à onChangeText, pointer 19 00:01:40,960 --> 00:01:43,930 sur le gestionnaire d'entrée de nombre 20 00:01:43,930 --> 00:01:48,330 et réinjecter la valeur et c'est notre valeur entrée. 21 00:01:48,420 --> 00:01:54,480 Maintenant, normalement, nous dirions simplement définir la valeur entrée ici et définir le texte d'entrée comme 22 00:01:54,480 --> 00:01:56,720 notre nouvelle valeur entrée que 23 00:01:56,820 --> 00:02:01,220 nous réinjectons dans l'entrée mais ici, je valide d'abord tout d'abord l'entrée. 24 00:02:01,290 --> 00:02:06,300 Donc, ce que je vais faire ici, c'est que je ne définirai pas ma valeur 25 00:02:06,330 --> 00:02:15,790 entrée directement dans le texte ici, à la place, je la définirai dans mon texte d'entrée où je remplace et je peux appeler replace car le texte 26 00:02:15,790 --> 00:02:22,450 d'entrée sera une chaîne et c'est un méthode Javascript normale qui existe sur les chaînes, où je remplace du 27 00:02:22,450 --> 00:02:27,430 contenu basé sur une expression régulière. Maintenant, les expressions régulières peuvent faire peur, 28 00:02:27,430 --> 00:02:36,010 mais c'est simple, nous le créons avec deux barres obliques et là, j'ajouterai des crochets et, fondamentalement, avec cette expression, je dirai que je 29 00:02:36,040 --> 00:02:45,250 remplace tout ce qui n'est pas un nombre de 0 à 9, donc pas un nombre, globalement dans tout le texte, ce qui signifie qu'il ne 30 00:02:45,250 --> 00:02:51,630 recherchera pas simplement le premier hit, mais qu'il cherchera tout le texte, je le remplacerai par une 31 00:02:52,850 --> 00:02:53,940 chaîne vide, 32 00:02:56,620 --> 00:03:02,440 donc je supprimerai essentiellement tout non-nombre de valeur. C'est ce qui se passe ici et c'est ce que je stocke 33 00:03:02,440 --> 00:03:04,540 dans mon nouvel état et avec cela, 34 00:03:04,600 --> 00:03:09,460 nous devons nous assurer que l'utilisateur ne peut pas saisir quoi que ce soit qui n'est pas un nombre. 35 00:03:09,460 --> 00:03:11,410 Alors vérifions cela ici sur Android, 36 00:03:11,410 --> 00:03:16,720 si j'appuie sur la virgule, vous verrez que cela est instantanément supprimé et c'est exactement ce dont 37 00:03:16,720 --> 00:03:19,960 nous avons besoin ici, nous n'autorisons que les valeurs numériques. 38 00:03:19,960 --> 00:03:24,030 C'est donc un peu de validation que nous avons en place ici, 39 00:03:24,030 --> 00:03:32,890 ce n'est pas tout ce que je veux, mais nous n'avons toujours pas terminé avec l'entrée car sur iOS, si nous sommes dans ce mode d'entrée et 40 00:03:32,890 --> 00:03:37,410 que nous voulons fermer ce clavier, en ce moment ce n'est pas vraiment faisable. 41 00:03:37,420 --> 00:03:44,500 Nous ne pouvons pas cliquer à l'extérieur et le fermer et ce serait bien si nous le pouvions. Maintenant, pour nous assurer que nous pouvons et que 42 00:03:44,500 --> 00:03:47,960 nous fermons le clavier si l'utilisateur tape ailleurs, je 43 00:03:48,160 --> 00:03:56,020 vais en fait envelopper la vue entière ici avec un composant spécial fourni par React Native et c'est le composant tactile 44 00:03:56,020 --> 00:03:58,490 sans rétroaction, donc un composant qui 45 00:03:58,630 --> 00:04:04,960 nous permet pour enregistrer un auditeur tactile sans donner de retour visuel car c'est exactement ce 46 00:04:04,960 --> 00:04:07,060 dont nous avons besoin ici. 47 00:04:07,150 --> 00:04:11,080 Nous pouvons envelopper notre écran entier avec cela, de sorte que 48 00:04:11,080 --> 00:04:18,190 toute notre vue peut être enveloppée avec ce toucher sans écouteur de rétroaction afin que là-bas ou là-bas, nous pouvons 49 00:04:18,190 --> 00:04:24,070 maintenant vous inscrire ou écouter l'événement de presse et quand une presse se produit, je veux rejeter 50 00:04:24,070 --> 00:04:30,010 le clavier et pour cela, React Native nous donne une API utile que nous pouvons importer à 51 00:04:30,010 --> 00:04:37,240 partir de React Native et c'est l'API du clavier. Ce n'est pas maintenant un composant mais c'est une API où nous pouvons interagir 52 00:04:37,240 --> 00:04:43,820 avec le périphérique natif lui-même pour ainsi dire, dans ce cas avec le clavier et ici sur une pression sur ce bouton, je veux déclencher 53 00:04:43,820 --> 00:04:50,230 une fonction et ici je vais aller avec une simple fonction en ligne, une courte fonction anonyme, vous pouvez bien sûr aussi utiliser une fonction 54 00:04:50,230 --> 00:04:52,700 nommée à la place, mais ici tout ce que 55 00:04:52,870 --> 00:04:57,230 je veux faire c'est appeler le clavier. rejeter. 56 00:04:57,310 --> 00:05:02,680 C'est une fonction que cette API de clavier que nous importons de React Native nous donne et qui fait exactement 57 00:05:02,680 --> 00:05:04,220 ce que les noms suggèrent, 58 00:05:04,360 --> 00:05:06,570 de sorte que maintenant si nous tapons ici, 59 00:05:06,580 --> 00:05:12,610 nous pouvons taper mais si je tapote ailleurs, nous rejetons le clavier et celui de Bien sûr, cela se produit sur les deux 60 00:05:12,640 --> 00:05:17,740 plates-formes et je pense que c'est une meilleure expérience utilisateur car c'est ce à quoi vous vous attendez, que 61 00:05:18,160 --> 00:05:21,040 vous fermez le clavier si vous appuyez ailleurs sur l'écran.