Donc, pour cela, comme je l'ai mentionné, je suis de retour dans le projet sur lequel
nous avons travaillé et bien sûr,
maintenant l'écran d'édition du produit est ce qui m'intéresse, c'est l'écran où j'ai ces entrées de texte ici avec mes étiquettes,
puis le saisie de texte, où nous avons actuellement une gestion
d'entrée très basique, nous récupérons au moins l'entrée utilisateur et la stockons à l'aide de l'état React, avec le
crochet d'état
d'utilisation, nous réintroduisons ensuite les valeurs Android dans l'entrée et c'est tout.
Cela nous permet de capturer et d'utiliser les entrées utilisateur, mais d'une part, nous pouvons améliorer la façon dont nous le
faisons, nous pouvons l'écrire de manière plus réutilisable et nous ne faisons aucune validation, donc ce
sont les choses que je veux changer dans ce module.
De plus, nous ne configurons pas nos entrées de quelque manière que ce soit, ce qui signifie
qu'en ce moment toutes les entrées de texte sont égales.
Nous ne changeons pas le type de clavier que
nous présentons, nous n'offrons pas d'entrée multiligne par exemple pour des textes plus longs comme ici pour la
description, rien de tout cela ne se passe et donc commençons en fait par configurer ces entrées
avant de continuer à la validation et ainsi de suite. Une configuration importante que vous pouvez ajouter à vos claviers
est le type de clavier. Le prop de type clavier peut être défini et là vous avez quelques valeurs disponibles. Maintenant, vous avez un peu de
valeurs ici, mais les documents officiels sont également un endroit que vous devez consulter lorsque vous pensez au type que
vous souhaitez attribuer ici, car lorsque vous visitez la documentation de saisie de texte officielle, vous voyez bien sûr quelques exemples, mais
ensuite vous voyez également tous les accessoires que vous avez et là, vous pouvez en savoir plus
sur chaque accessoire et comment le configurer et pour le type
de clavier par exemple, nous avons appris que seuls ces types sont pris en charge multiplateforme.
Donc, bien que nous ayons des types iOS et Android spécifiques disponibles, ces types ne peuvent être utilisés qu'avec une vérification de
la plate-forme afin de vous assurer
que vous n'utilisez pas le type sur Android qui n'est pas pris en charge là-bas et qui
n'aurait donc aucun effet.
Par conséquent, je m'en tiendrai aux types de plates-formes croisées, de sorte que je n'ai pas à ajouter une vérification de plate-forme supplémentaire et là, généralement pour, disons,
du texte normal, nous nous en tiendrions à la valeur par défaut, ce qui bien sûr est donc un type que nous n'avons pas
doivent attribuer, mais cela change par exemple lorsque nous regardons notre entrée de prix. Là, je veux m'assurer que les gens n'entrent que des nombres
valides, qu'ils n'entrent aucun texte et donc bien sûr, je veux montrer le bon clavier pour les aider et si nous jetons
un coup d'œil à la documentation officielle, nous voyons qu'il
y a trois principaux types de claviers multiplates-formes que nous pouvons montrer - pavé numérique, pavé décimal
et numérique et là, par exemple, le pavé décimal est une entrée qui permet à l'utilisateur d'entrer des nombres décimaux, ce qui est exactement
ce que je veux ici pour mon prix. Donc, définir ce type de clavier ici a
beaucoup de sens parce que maintenant, si nous jetons un coup d'œil
à cette entrée de prix ici et que je permute le clavier logiciel que vous pouvez faire avec le raccourci de commande
k ici sur iOS ou avec le menu matériel là-haut, puis clavier, basculer clavier logiciel, vous voyez que maintenant j'ai ce clavier décimal qui s'ouvre ici
alors que sur les autres entrées, j'ai un clavier texte normal et bien sûr, c'est la
même chose sur Android.
Si nous allons à l'administrateur là-bas et que nous regardons ensuite le prix, nous voyons également que là, on nous présente cette
entrée conviviale pour les numéros au lieu du clavier de texte normal que nous obtenons dans les autres champs de saisie.
Voilà donc comment nous pouvons configurer cela et c'est bien sûr une configuration importante. Nous pouvons également configurer d'autres choses,
par exemple ici sur l'entrée de titre ici.
Si vous atteignez l'espace de contrôle et que vous regardez la saisie semi-automatique, vous voyez qu'il y a un tas de choses
que vous pouvez configurer, par exemple si cela doit être capitalisé automatiquement. Là, vous avez différentes valeurs que vous pouvez
définir, par exemple ce caractère doit être en majuscule, seulement des phrases ou des mots complets et ici,
je vais aller pour des phrases complètes par exemple pour aider à les mettre en majuscule.
Vous pouvez également activer la correction automatique et en l'ajoutant comme ceci, vous vous assurez que la correction automatique est
activée pour cette entrée, en la définissant sur false, vous pouvez la désactiver ou simplement en l'omettant
bien sûr, c'est également une option, etc. . Il y a un tas de choses que vous pouvez
configurer et je recommanderais fortement, comme toujours, de jeter un œil aux documents officiels pour en savoir plus sur les
options de configuration disponibles et ce qu'elles
font, mais aussi simplement jouer avec celles-ci pour obtenir un idée de ce que vous pouvez y faire et de ce que fait
chaque option et de ce qui pourrait avoir du sens pour votre prochaine application. Une autre valeur que je veux définir par exemple est
le type de clé de retour.
Cela peut être réglé sur quelques valeurs et
si vous vérifiez les documents officiels, vous apprendrez que toutes les valeurs ne sont pas disponibles sur
toutes les plates-formes, seules ces cinq sont disponibles sur plusieurs plates-formes et là, vous pouvez essentiellement configurer ce bouton
en bas le coin droit. Si vous regardez votre entrée ici
et que vous cliquez sur l'une des entrées, c'est ce bouton ici dans le coin inférieur droit qui
dit retourner ici pour l'imageUrl. Maintenant, sur le titre, je le mets au
suivant, donc si vous cliquez dans le champ du titre, vous voyez maintenant ici qu'il dit plus large, qui est l'allemand pour le suivant
et c'est juste parce que j'ai un émulateur allemand ici et permettez-moi également de redémarrer ce sur Android car il s'est écrasé là-bas pour
que je puisse le montrer aussi.
Si nous allons à notre entrée là-bas, cliquez dans le titre, vous voyez ce bouton suivant ici, sur l'imageUrl, vous
avez ce bouton terminé ici et qui peut être configuré avec le type de clé de retour,
mais sachez que cela ne contrôle que la façon dont ceci est affiché, ce qu'il dit là, quelle est l'étiquette là-bas
ou quel type de bouton est présenté,
cela ne change pas automatiquement ce que fait ce bouton, par exemple si je clique sur le bouton plus large, ce
clavier se ferme,
la même chose est vraie si Je clique sur la touche retour ici.
Maintenant, lorsque nous parlons des comportements des entrées de texte, tous les événements que nous pouvons écouter sont intéressants.
Avec on, vous avez une idée de tous les événements que vous pouvez écouter
et par exemple là où vous avez obtenu Blur qui se déclenche chaque fois qu'une entrée perd le focus, onChange se déclenche, ainsi à
chaque frappe et vous donne l'événement d'entrée complet, onChangeText qui se déclenche également à chaque frappe, mais ne vous donne que le
texte qui a été saisi, ce qui est généralement ce qui vous intéresse le plus.
onEndEditing où nous pouvons également avoir une idée du moment où cela se déclenche, donc si j'entre onEndEditing ici, voyons quand cela s'imprime dans la
console, si je vais maintenant
ici à mon entrée et s'il vous plaît noter que je suis sur l'entrée de titre, donc si Je tape là-bas test, nous voyons qu'il
ne s'est pas déclenché ici, si je
clique dessus, maintenant il s'est déclenché sur EndEditing. La même chose est vraie si je clique sur le
bouton plus large ici par exemple, donc en gros chaque fois que nous quittons ce clavier avec le focus ou en général lorsque nous cliquons
sur ce bouton fait là aussi.
De plus, nous avons également d'autres écouteurs, comme onFocus qui se déclenche évidemment lorsque cette entrée gagne le
focus ou également onSelectionChange lorsque nous sélectionnons du texte là-bas ou onSubmitEditing qui est déclenché lorsque ce bouton de retour est cliqué, donc si j'ajoute
onSubmitEditing ici, quand je ajoutez également
cet écouteur et ajoutez également une instruction de journal de console, vous voyez que maintenant cela se déclenchera, chaque fois que je tape ici, ne
se
déclenche pas, chaque fois que je clique ici, il ne se déclenche pas non plus, nous obtenons uniquement
le onEndEditing connectez-vous
ici mais il se déclenchera si j'appuie sur la touche plus large ici, là vous voyez onSubmitEditing, c'est
donc un écouteur que
vous utiliseriez pour écouter lorsque la touche retour est cliquée et ensuite vous pouvez faire
ce que vous voulez faire, comme soumettre votre données ou déplacer automatiquement le focus vers l'entrée suivante
à l'aide de références par exemple si vous le souhaitez.
Voici comment vous pouvez configurer cela et comme je l'ai dit, je vous recommande de vous y plonger
pour avoir une idée de comment cela
fonctionne, je vais maintenant passer à autre chose et je veux m'assurer que nous n'écoutons pas seulement les entrées et stocker
les valeurs, mais que nous validons également ce que l'utilisateur entre.