Commençons par le rendre à nouveau utilisable car c'est la chose la plus importante.
Le correctif ici est bien sûr de rendre ce défilement car si nous pouvons faire défiler cette vue, nous pouvons
à nouveau atteindre ce bouton là-bas.
Donc, de retour sur l'écran de démarrage du jeu, nous avons à nouveau besoin de la bonne vieille vue de défilement
que nous importons de React Native et maintenant nous pouvons l'utiliser pour envelopper notre vue qui entoure notre écran, cette
touche sans bouton de rétroaction dans ce cas, avec la vue de défilement .
Utilisons donc la vue de défilement pour entourer tout notre écran ici, tout notre composant à
la fin et avec cela, c'est maintenant défilable. L'avantage est que nous sommes maintenant le clavier est ouvert sur
iOS, nous pouvons faire défiler un
peu mais nous avons toujours le problème qu'il rebondit, donc ce n'est pas parfait mais au moins nous
pouvons atteindre ce bouton et nous prendrons soin sur le clavier en une seconde et
nous pouvons maintenant utiliser à nouveau l'application, car nous pouvons maintenant recommencer le jeu. Maintenant, sur l'écran du jeu, en passant, nous avons un problème similaire
sur le petit appareil Android, nous avons si peu de hauteur disponible que nous ne pouvons
même pas voir notre journal, nous pouvons le faire défiler mais oui
ce n'est pas trop pratique et ici sur iOS , nous
n'avons pas non plus un gros journal. Donc là, nous pourrions vouloir utiliser une mise en page
totalement différente par exemple ou autre, nous devrons
voir mais avant de me concentrer sur
cet écran, il y a aussi une autre chose. Nous avons corrigé le défilement, c'est bien
mais nous avons
encore deux autres problèmes sur l'écran de démarrage du
jeu et si je change quelque chose, changez-le juste pour que cela redémarre, nous avons la disposition dont je ne suis pas
satisfait avec les boutons, bien que cela semble maintenant différent qu'auparavant et nous reviendrons sur
pourquoi dans
une seconde et
le clavier, c'est le vrai problème ici. Alors, que pouvons-nous faire à ce sujet? Pour résoudre ce problème de clavier, il
existe un autre composant que vous pouvez importer à partir de React Native et c'est la vue évitant le clavier.
C'est une vue, un composant que vous pouvez utiliser pour envelopper votre composant, dans ce cas à l'intérieur de cette vue de
défilement et c'est important, utilisez-le à l'intérieur de la vue de défilement, puis encapsulez l'intégralité
de votre toucher sans composant de rétroaction pour vous assurer que votre clavier, votre clavier virtuel lorsqu'il s'ouvre ne recouvre jamais l'entrée que vous saisissez et
pour cela, vous pouvez également configurer
la vue en évitant le clavier, vous pouvez
définir un comportement là-bas et qui accepte différentes valeurs et le positionner ici et moi '' Je reviendrai sur les différents
comportements que vous pouvez configurer et comment ils diffèrent en une seconde.
Avec cela ajouté ici sur iOS, vous verrez maintenant que cela glisse un peu lorsque nous ouvrons le clavier logiciel, lorsque nous
commençons à taper. Ne glisse pas suffisamment, mais
pour cela, nous pouvons également revenir ici et définir le décalage vertical du clavier sur un nombre, par exemple sur 30, c'est
la quantité de pixels
qu'il fait glisser vers le haut et cela
devrait être la hauteur de votre entrée en général ou autour de la hauteur de votre entrée.
Et maintenant, cela glisse vers le haut afin que nous puissions toujours voir
ce qui est génial, il ne recouvre plus jamais notre entrée ici.
Maintenant, le paramétrer sur la position de comportement signifie simplement qu'il repositionne l'écran entier de 30 pixels en gros, nous
pourrions
également le définir sur le rembourrage de sorte qu'un rembourrage soit ajouté en bas pour tout faire glisser et
enfin, mais non le moindre, vous pouvez également modifier le hauteur globale de l'écran un peu.
Maintenant, généralement sur iOS, cela fonctionne mieux si vous utilisez la position et sur Android, cela fonctionne mieux si vous utilisez le
rembourrage et
plus tard dans ce module, vous avez appris comment savoir sur quelle plate-forme
vous utilisez, pour l'instant je vais utiliser position ici. Avec cela, nous avons résolu le problème du clavier.