Maintenant, nous avons commencé à travailler sur l'entrée et cela ne semble pas trop mal, mais nous
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
une virgule ou coller dans des non contenu numérique
et pour cela, nous devons bien sûr valider ce que l'utilisateur a entré ici.
Maintenant, pour valider ce que l'utilisateur a entré, je veux, comme je l'ai déjà montré, enregistrer la valeur
entrée
par l'utilisateur à chaque frappe et la réintroduire dans l'entrée, mais après
chaque frappe, je veux également valider l'entrée à effectuer sûr que nous avons une
valeur valide là-bas, donc essentiellement un nombre. Pour cela tout d'abord, nous devons gérer un
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
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
une chaîne au début car toutes les entrées ne sont qu'une chaîne et vous devez manuellement
la convertir
en un nombre puis si vous le souhaitez. J'ajouterai également une fonction de valeur entrée définie ici, le
deuxième élément que nous récupérons de cet état d'utilisation de tableau nous donne et maintenant
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.
Cela obtiendra le texte d'entrée et c'est la fonction parce que c'est juste une fonction que
je stocke dans cette constante que je veux connecter à mon entrée et là à onChangeText, pointer
sur le gestionnaire d'entrée de nombre
et réinjecter la valeur et c'est notre valeur entrée.
Maintenant, normalement, nous dirions simplement définir la valeur entrée ici et définir le texte d'entrée comme
notre nouvelle valeur entrée que
nous réinjectons dans l'entrée mais ici, je valide d'abord tout d'abord l'entrée.
Donc, ce que je vais faire ici, c'est que je ne définirai pas ma valeur
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
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
contenu basé sur une expression régulière. Maintenant, les expressions régulières peuvent faire peur,
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
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
recherchera pas simplement le premier hit, mais qu'il cherchera tout le texte, je le remplacerai par une
chaîne vide,
donc je supprimerai essentiellement tout non-nombre de valeur. C'est ce qui se passe ici et c'est ce que je stocke
dans mon nouvel état et avec cela,
nous devons nous assurer que l'utilisateur ne peut pas saisir quoi que ce soit qui n'est pas un nombre.
Alors vérifions cela ici sur Android,
si j'appuie sur la virgule, vous verrez que cela est instantanément supprimé et c'est exactement ce dont
nous avons besoin ici, nous n'autorisons que les valeurs numériques.
C'est donc un peu de validation que nous avons en place ici,
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
que nous voulons fermer ce clavier, en ce moment ce n'est pas vraiment faisable.
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
nous fermons le clavier si l'utilisateur tape ailleurs, je
vais en fait envelopper la vue entière ici avec un composant spécial fourni par React Native et c'est le composant tactile
sans rétroaction, donc un composant qui
nous permet pour enregistrer un auditeur tactile sans donner de retour visuel car c'est exactement ce
dont nous avons besoin ici.
Nous pouvons envelopper notre écran entier avec cela, de sorte que
toute notre vue peut être enveloppée avec ce toucher sans écouteur de rétroaction afin que là-bas ou là-bas, nous pouvons
maintenant vous inscrire ou écouter l'événement de presse et quand une presse se produit, je veux rejeter
le clavier et pour cela, React Native nous donne une API utile que nous pouvons importer à
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
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
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
nommée à la place, mais ici tout ce que
je veux faire c'est appeler le clavier. rejeter.
C'est une fonction que cette API de clavier que nous importons de React Native nous donne et qui fait exactement
ce que les noms suggèrent,
de sorte que maintenant si nous tapons ici,
nous pouvons taper mais si je tapote ailleurs, nous rejetons le clavier et celui de Bien sûr, cela se produit sur les deux
plates-formes et je pense que c'est une meilleure expérience utilisateur car c'est ce à quoi vous vous attendez, que
vous fermez le clavier si vous appuyez ailleurs sur l'écran.