1 00:00:02,040 --> 00:00:06,860 Commençons par le rendre à nouveau utilisable car c'est la chose la plus importante. 2 00:00:06,900 --> 00:00:12,780 Le correctif ici est bien sûr de rendre ce défilement car si nous pouvons faire défiler cette vue, nous pouvons 3 00:00:12,780 --> 00:00:14,610 à nouveau atteindre ce bouton là-bas. 4 00:00:14,610 --> 00:00:20,580 Donc, de retour sur l'écran de démarrage du jeu, nous avons à nouveau besoin de la bonne vieille vue de défilement 5 00:00:22,970 --> 00:00:28,460 que nous importons de React Native et maintenant nous pouvons l'utiliser pour envelopper notre vue qui entoure notre écran, cette 6 00:00:29,070 --> 00:00:33,390 touche sans bouton de rétroaction dans ce cas, avec la vue de défilement . 7 00:00:33,510 --> 00:00:39,330 Utilisons donc la vue de défilement pour entourer tout notre écran ici, tout notre composant à 8 00:00:39,340 --> 00:00:45,600 la fin et avec cela, c'est maintenant défilable. L'avantage est que nous sommes maintenant le clavier est ouvert sur 9 00:00:45,610 --> 00:00:47,370 iOS, nous pouvons faire défiler un 10 00:00:47,560 --> 00:00:52,510 peu mais nous avons toujours le problème qu'il rebondit, donc ce n'est pas parfait mais au moins nous 11 00:00:52,510 --> 00:00:56,740 pouvons atteindre ce bouton et nous prendrons soin sur le clavier en une seconde et 12 00:00:56,740 --> 00:01:04,590 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 13 00:01:04,590 --> 00:01:09,420 sur le petit appareil Android, nous avons si peu de hauteur disponible que nous ne pouvons 14 00:01:09,510 --> 00:01:13,380 même pas voir notre journal, nous pouvons le faire défiler mais oui 15 00:01:13,440 --> 00:01:16,890 ce n'est pas trop pratique et ici sur iOS , nous 16 00:01:16,950 --> 00:01:21,960 n'avons pas non plus un gros journal. Donc là, nous pourrions vouloir utiliser une mise en page 17 00:01:21,960 --> 00:01:24,060 totalement différente par exemple ou autre, nous devrons 18 00:01:24,080 --> 00:01:26,160 voir mais avant de me concentrer sur 19 00:01:26,160 --> 00:01:31,020 cet écran, il y a aussi une autre chose. Nous avons corrigé le défilement, c'est bien 20 00:01:31,020 --> 00:01:32,160 mais nous avons 21 00:01:32,160 --> 00:01:35,170 encore deux autres problèmes sur l'écran de démarrage du 22 00:01:35,220 --> 00:01:42,250 jeu et si je change quelque chose, changez-le juste pour que cela redémarre, nous avons la disposition dont je ne suis pas 23 00:01:42,260 --> 00:01:47,120 satisfait avec les boutons, bien que cela semble maintenant différent qu'auparavant et nous reviendrons sur 24 00:01:47,120 --> 00:01:48,110 pourquoi dans 25 00:01:48,170 --> 00:01:49,210 une seconde et 26 00:01:49,220 --> 00:01:55,640 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 27 00:01:55,640 --> 00:02:01,490 existe un autre composant que vous pouvez importer à partir de React Native et c'est la vue évitant le clavier. 28 00:02:01,670 --> 00:02:08,750 C'est une vue, un composant que vous pouvez utiliser pour envelopper votre composant, dans ce cas à l'intérieur de cette vue de 29 00:02:08,750 --> 00:02:13,760 défilement et c'est important, utilisez-le à l'intérieur de la vue de défilement, puis encapsulez l'intégralité 30 00:02:13,760 --> 00:02:22,470 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 31 00:02:22,530 --> 00:02:24,720 pour cela, vous pouvez également configurer 32 00:02:24,770 --> 00:02:27,660 la vue en évitant le clavier, vous pouvez 33 00:02:27,750 --> 00:02:34,750 définir un comportement là-bas et qui accepte différentes valeurs et le positionner ici et moi '' Je reviendrai sur les différents 34 00:02:34,760 --> 00:02:38,880 comportements que vous pouvez configurer et comment ils diffèrent en une seconde. 35 00:02:39,260 --> 00:02:47,180 Avec cela ajouté ici sur iOS, vous verrez maintenant que cela glisse un peu lorsque nous ouvrons le clavier logiciel, lorsque nous 36 00:02:47,210 --> 00:02:50,050 commençons à taper. Ne glisse pas suffisamment, mais 37 00:02:50,060 --> 00:02:56,210 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 38 00:02:56,210 --> 00:02:57,450 la quantité de pixels 39 00:02:57,530 --> 00:02:59,860 qu'il fait glisser vers le haut et cela 40 00:02:59,870 --> 00:03:04,660 devrait être la hauteur de votre entrée en général ou autour de la hauteur de votre entrée. 41 00:03:04,700 --> 00:03:07,610 Et maintenant, cela glisse vers le haut afin que nous puissions toujours voir 42 00:03:07,610 --> 00:03:10,320 ce qui est génial, il ne recouvre plus jamais notre entrée ici. 43 00:03:10,370 --> 00:03:17,140 Maintenant, le paramétrer sur la position de comportement signifie simplement qu'il repositionne l'écran entier de 30 pixels en gros, nous 44 00:03:17,140 --> 00:03:17,770 pourrions 45 00:03:18,090 --> 00:03:24,740 également le définir sur le rembourrage de sorte qu'un rembourrage soit ajouté en bas pour tout faire glisser et 46 00:03:24,740 --> 00:03:30,170 enfin, mais non le moindre, vous pouvez également modifier le hauteur globale de l'écran un peu. 47 00:03:30,170 --> 00:03:37,070 Maintenant, généralement sur iOS, cela fonctionne mieux si vous utilisez la position et sur Android, cela fonctionne mieux si vous utilisez le 48 00:03:37,070 --> 00:03:37,870 rembourrage et 49 00:03:37,880 --> 00:03:42,100 plus tard dans ce module, vous avez appris comment savoir sur quelle plate-forme 50 00:03:42,140 --> 00:03:47,740 vous utilisez, pour l'instant je vais utiliser position ici. Avec cela, nous avons résolu le problème du clavier.