Donc, étape par étape, nous progressons, ce que nous ne
pouvons pas faire, c'est entrer un nombre.
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
amusant de le rechercher, ce serait plus agréable si vous pouviez le voir, n'est-ce pas?
Donc, par conséquent, stylisons ce champ de saisie, ce
champ de saisie de texte ici un peu et comme auparavant, je suis allé le faire dans un composant
distinct.
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
une entrée de texte à partir de React Native et ici, je n'aurai en fait pas besoin de
la vue parce que nous aurons juste l'entrée de texte ici avec style et configurée là-bas,
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
certainement besoin est la feuille de
style, car cela devrait maintenant être stylé ici afin que nous ayons un aspect d'entrée par défaut que nous
pourrions réutiliser dans ce application si nous avions besoin de plusieurs entrées à différents endroits et
c'est vraiment l'état
d'esprit dans lequel vous devez entrer, créer des composants réutilisables afin que vous n'ayez pas
à copier du code ou à vous répéter, mais que vous puissiez facilement partager vos composants et créer facilement les
applications vous voulez à partir de votre ensemble de blocs de construction que vous créez vous-même à la fin.
Alors ici, mes styles s'obtiennent avec Stylesheet. créer, comme ça, semble bon et maintenant dans ce composant, je
veux retourner une entrée de
texte, donc cette entrée de texte intégrée.
Maintenant, bien sûr, mon idée est que nous pouvons
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
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
objet ici pour le style et
pour commencer prendre tous mes styles mis en place dans mon objet styles et là disons dans
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
puissions également définir des styles de l'extérieur et maintenant dans la feuille de style, nous pouvons
ajouter le style d'entrée pour attribuer un style à l'entrée. Donc ici, nous pourrions donner à cela une hauteur de disons 30
qui devrait être une hauteur qui semble relativement bonne et pour voir quelque chose, je veux également ajouter une bordure en bas.
Vous pouvez également ajouter une bordure autour de l'entrée entière avec la couleur et la largeur de la bordure et ainsi
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
et quelque chose que vous pouvez configurer en fonction de vos préférences personnelles .
Seule une bordure en bas peut être définie avec la couleur du bas de la bordure et là, j'irai
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,
ajouter une marge verticale de 10 pour avoir un certain espacement autour de l'entrée, au moins en haut
et en bas et maintenant avec cela, le style
de base pour cette
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
du dossier des composants, comme ça et remplacer cette
entrée de texte ici par ma propre entrée qui, à la fin, enveloppe bien cette entrée de
texte intégrée.
Donc, utilisez ma
propre entrée, débarrassez-vous de l'entrée de texte là-haut dont nous n'avons plus besoin
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
devient plus grand à mesure que vous tapez, ce qui n'est certainement pas ce que nous voulons bien sûr.
Nous n'avons bien sûr pas terminé,
au lieu de styliser la largeur, je
vais aller à l'écran de
démarrage du jeu, donc à l'endroit où nous utilisons l'entrée et configurons
le style ici parce que pour moi, il est logique que nous ayons des informations générales
styles que nous voulons toujours dans le composant d'entrée, quelque chose comme la hauteur ou la bordure, mais
certains
styles spécifiques, comme sa taille, sa largeur, c'est quelque chose que
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
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
avec l'accessoire de style.
Donc là, on peut maintenant pointer sur les styles. et avec cela, il aura cette largeur à tout moment et
si nous tapons là, nous ne l'agrandissons plus,
au lieu de cela, nous pouvons simplement simplement faire défiler automatiquement cette entrée.
Maintenant, pour cette entrée spécifique, pour cette disposition spécifique ici, il serait également intéressant que le texte
soit
centré, je pense, pour la plupart des entrées, vous voulez que le comportement par défaut d'écrire de gauche
à droite et
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
où je veux avoir ce centrage ici, sur cette
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
ici au milieu comme nous tapons
et c'est vraiment sympa de simplement entrer un nombre, comme ça.
En parlant de cela, en ce moment, nous pouvons entrer
quoi que ce soit là-dedans, nous devons donc certainement configurer cette entrée et pour cela, si je vais dans
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
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
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
définir des choses comme si c'est multiligne ou non , quelle
peut être la longueur du texte.
Vous pouvez également définir un texte
d'espace réservé, vous pouvez définir la correction automatique et toutes ces choses amusantes,
alors vérifiez définitivement ces documents pour trouver la propriété spécifique dont vous pourriez avoir besoin pour votre cas d'utilisation.
Je veux pouvoir définir ces accessoires, mais je veux pouvoir les définir à partir de
l'endroit où j'utilise mon entrée personnalisée. Donc, pas d'ici car cela garantirait que nous utilisons la
même configuration pour toutes les entrées que
nous pourrions avoir dans notre application, je veux avoir plus de flexibilité et simplement mettre en place un style de base
ici et configurer l'entrée à l'endroit où nous puis utilisez-le à la place du composant wrapper principal.
La chose cool est React et ce n'est pas React Native, c'est juste React en Javascript normal a une
syntaxe pour ça.
Vous pouvez prendre vos accessoires que vous obtenez et les diffuser sur votre composant comme ceci.
La syntaxe peut sembler un peu étrange, mais en fin de compte, elle prend
tous les accessoires que vous avez, tous les accessoires que vous définissez ici et les ajoute essentiellement à votre composant en tant qu'accessoires.
Maintenant, si vous définissez ensuite d'autres accessoires comme le style et que vous avez déjà un
style ici, ce style remplacera le style que vous
avez ici et c'est en fait ce que je veux parce que si je définis un accessoire de style
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
à cette
entrée de texte, mais si vous définissez d'autres accessoires en dehors de ce composant, donc sur mon composant personnalisé, ils seront
ajoutés à l'entrée de texte et que nous permet d'ajouter tous les accessoires que nous pouvons ajouter sur la saisie
de texte également sur notre entrée, donc sur notre propre composant.
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
que lorsque nous appuyez sur le bouton de soumission là-bas, nous perdons le
focus et nous fermons le clavier virtuel. Nous pouvons définir autocapitalize sur aucun, ce qui est l'une des valeurs
autorisées si vous consultez les documents. Vous pouvez le définir sur aucun, des phrases,
des mots et ainsi de suite, donc je ne veux pas que la capitalisation soit activée ici parce que nous allons simplement entrer
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
faux afin que nous ne corrigions pas automatiquement l'entrée utilisateur et très important
ici, je vais définir le type de clavier sur numérique, afin que l'utilisateur doive entrer un nombre ici.
Je vais définir la longueur maximale ici à 2 afin que vous ne puissiez entrer que deux chiffres et pas un nombre
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
fonctionne qu'avec deux chiffres nombre. Avec tout cela configuré, maintenant
si nous revenons en arrière et que je bascule mon clavier virtuel, vous voyez que vous obtenez ce clavier numérique ici et
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.
De plus, ici sur Android, nous voyons cela, si vous cliquez sur le bouton de
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
fait trouver une solution différente pour la fermer si vous appuyez ailleurs, par exemple, car pour le moment,
cela ne se produit pas.
Mais la bonne chose est que nous avons maintenant un clavier que nous pouvons voir et un clavier où nous pouvons saisir des chiffres.
Une chose que je veux changer, c'est que pour le moment, je peux également entrer un séparateur décimal ici.
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
les documents officiels sont l'endroit où aller, là pour la saisie de texte, vous pouvez plonger dans un type de clavier
et trouver ce que vous pouvez définir, ce qui fonctionne sur toutes les plates-formes et ce que vous pouvez définir
si vous souhaitez une vérification qui vérifie sur quelle plate-forme vous exécutez le code dont nous n'avons pas encore
entendu parler.
Le pavé numérique est cependant pris en charge sur les deux plates-formes
et si vous le définissez, vous avez maintenant une entrée où vous ne pouvez pas entrer de décimale ici, si vous
tapez ici et vous ne pouvez pas le faire sur iOS. Sur Android, vous pouvez malheureusement le faire, donc nous
devrons également trouver un correctif différent.