1 00:00:02,400 --> 00:00:09,500 Maintenant, avec cela, si nous allons à l'écran suivant où nous avons un jeu de course, nous sommes confrontés au problème 2 00:00:09,520 --> 00:00:10,610 suivant. En 3 00:00:10,610 --> 00:00:15,680 mode portrait, cela semble bon, mais si nous faisons pivoter l'appareil, cela ne semble pas trop bon. 4 00:00:15,680 --> 00:00:20,520 Maintenant, ici, une solution pourrait simplement être de changer un peu le style si 5 00:00:20,570 --> 00:00:23,320 nous n'avons pas autant de hauteur disponible. 6 00:00:23,420 --> 00:00:28,150 Alternativement, nous rendons une disposition totalement différente en fonction de l'espace disponible, les deux 7 00:00:28,220 --> 00:00:30,470 seraient des options que vous avez. 8 00:00:30,470 --> 00:00:36,920 Vous pouvez par exemple essayer de rendre cela côte à côte en ajoutant simplement une vérification if ici dans votre 9 00:00:36,920 --> 00:00:42,620 écran de jeu où vous retournez un code jsx totalement différent et peut-être aussi avec un style totalement 10 00:00:42,620 --> 00:00:49,820 différent et donc une mise en page basée sur la largeur ou la hauteur disponible, puis il vous suffirait de configurer un écouteur 11 00:00:49,820 --> 00:00:51,200 qui restitue votre 12 00:00:51,200 --> 00:00:56,150 composant, donc avec l'étape définie comme nous l'avons fait ici dans l'écran de démarrage du jeu 13 00:00:56,150 --> 00:01:02,560 pour restituer votre composant chaque fois que c'est le cas. Je pense que ce serait plutôt intéressant et c'est donc quelque chose que je ferai ici. 14 00:01:02,570 --> 00:01:08,740 Ce que je vais faire, c'est que je veux rendre mes boutons ici à gauche et à droite du conteneur de numéros 15 00:01:08,740 --> 00:01:13,370 si nous n'avons qu'une hauteur limitée disponible et le rendre comme nous l'avons toujours fait si 16 00:01:13,390 --> 00:01:15,160 ce n'est pas le cas. 17 00:01:15,460 --> 00:01:20,560 Je veux donc rendre un code jsx totalement différent en fonction de mes dimensions. 18 00:01:20,560 --> 00:01:30,540 Donc ici, je vais ajouter une vérification if et dire si les dimensions obtiennent la hauteur de la fenêtre, disons que si elle est inférieure 19 00:01:30,670 --> 00:01:33,850 à 500 et que nous verrons si 20 00:01:33,850 --> 00:01:37,770 cette valeur fonctionne, alors je veux retourner essentiellement ce 21 00:01:37,860 --> 00:01:47,770 code jsx de là-bas, donc je ' Je vais le copier, le mettre entre parenthèses ici, entre parenthèses mais je ne veux pas avoir 22 00:01:47,770 --> 00:01:55,390 ma carte ici, à la place, j'aurai le premier bouton principal avant mon conteneur de numéro, le suivant après 23 00:01:55,390 --> 00:01:59,530 le conteneur de numéro et j'aurai tout de cela à 24 00:02:02,410 --> 00:02:09,000 l'intérieur d'une nouvelle vue ici que je vais envelopper, qui devrait exposer ces trois choses d'affilée. 25 00:02:09,010 --> 00:02:16,180 Je vais donc ajouter un tout nouveau style ici, des styles disons des contrôles ou tout ce que vous voulez pour le 26 00:02:16,300 --> 00:02:21,400 nommer et maintenant j'ajoute ceci à ma feuille de style ici et c'est la même feuille 27 00:02:21,400 --> 00:02:27,460 de style qu'avant car il définit simplement des styles que je peux utiliser n'importe où dans mon composant, 28 00:02:27,460 --> 00:02:31,540 peu importe dans quelles conditions je rend quoi et ici, je 29 00:02:31,540 --> 00:02:38,890 vais définir cette direction flexible sur la ligne, la valeur par défaut est la colonne et maintenant nous voulons avoir une ligne ici 30 00:02:39,070 --> 00:02:48,360 et je vais définir le contenu à espacer et nous verrons comment ça ressemble. Si nous enregistrons maintenant cela et que nous commençons un nouveau jeu ici en mode paysage, ça n'a pas 31 00:02:48,390 --> 00:02:49,470 l'air trop mal, encore 32 00:02:49,470 --> 00:02:54,690 du travail à faire, mais c'est maintenant ce que j'obtiens ici en mode paysage ou sur des appareils avec une hauteur limitée. 33 00:02:55,350 --> 00:02:57,370 Sur les appareils avec plus de hauteur, 34 00:02:57,480 --> 00:03:01,530 j'ai toujours l'ancienne vue ici, ce qui est bien sûr exactement ce que je veux. 35 00:03:01,620 --> 00:03:08,260 Maintenant, corrigeons cette vue ici et donc nous pouvons simplement aller aux contrôles et donner une largeur de disons 36 00:03:08,260 --> 00:03:16,340 80% pour que le conteneur global soit plus grand et très important, définissez aligner les éléments ici au centre de sorte que le 37 00:03:16,340 --> 00:03:24,340 conteneur de nombre et les deux boutons sont tous centrés verticalement. Et maintenant, avec cela, si nous donnons un 38 00:03:24,340 --> 00:03:33,560 nouvel essai ici, nous entrons ici, cela semble beaucoup mieux et cela fonctionne de la même manière qu'auparavant, mais 39 00:03:33,560 --> 00:03:38,950 maintenant nous avons une disposition différente en fonction de nos dimensions. 40 00:03:38,990 --> 00:03:44,960 Maintenant, bien sûr, le problème est que cette disposition ne change pas si nous tournons, pas la fin du monde, 41 00:03:45,050 --> 00:03:49,560 mais nous pourrions vouloir revenir à cette ancienne disposition et vous avez appris comment 42 00:03:49,670 --> 00:03:54,690 cela fonctionne, nous avons juste besoin de gérer cela avec l'état et le définir un auditeur. 43 00:03:54,690 --> 00:04:00,200 Maintenant, j'ai déjà useState et useEffect ici dans l'écran de jeu, donc tout ce que nous devons 44 00:04:00,200 --> 00:04:08,180 faire dans notre composant d'écran de jeu est de commencer par configurer cet état ici et à la fin ce que nous voulons gérer ici 45 00:04:08,370 --> 00:04:18,370 est la largeur de notre appareil qui change avec le temps, peut-être nommer cette largeur de périphérique disponible pour indiquer clairement que nous ne définissons pas la largeur de périphérique ici, 46 00:04:18,370 --> 00:04:21,960 nous ne faisons que définir la largeur de périphérique détectée, vous 47 00:04:22,030 --> 00:04:25,370 pouvez donc également nommer cette largeur de périphérique détectée. 48 00:04:25,450 --> 00:04:34,090 Je vais le nommer largeur de périphérique disponible et définir la largeur de périphérique disponible. Je gère cela avec useState où j'utilise les dimensions obtenir la largeur de 49 00:04:34,090 --> 00:04:43,930 la fenêtre pour obtenir la largeur de périphérique disponible et bien sûr, je viens de reconnaître que c'est faux, nous nous intéressons à la hauteur, pas à la largeur, mais 50 00:04:43,930 --> 00:04:44,470 nous 51 00:04:44,470 --> 00:04:46,480 aurons également besoin de la largeur 52 00:04:49,520 --> 00:04:52,850 pour cette vérification ici, nous aurons donc besoin des deux. 53 00:04:53,300 --> 00:04:59,250 Nous avons donc la largeur de périphérique disponible et je gérerai également un autre état, 54 00:04:59,270 --> 00:05:00,560 c'est la 55 00:05:00,560 --> 00:05:03,990 hauteur de notre périphérique disponible, ici aussi, c'est 56 00:05:04,000 --> 00:05:07,300 la hauteur de périphérique disponible définie et donc 57 00:05:07,300 --> 00:05:11,700 ici initialement, nous obtenons la hauteur de périphérique disponible et maintenant 58 00:05:11,710 --> 00:05:19,710 nous devons changer les deux lorsque notre changements d'orientation. Pour cela, nous pouvons utiliser l'effet par exemple ici, configurer une fonction qui 59 00:05:19,710 --> 00:05:29,310 s'exécute chaque fois que notre composant effectue un rendu et dans cette fonction ici, je vais configurer les dimensions, ajouter un écouteur d'événements, écouter les événements de changement et configurer une 60 00:05:29,330 --> 00:05:35,810 fonction qui devrait se déclencher lorsque c'est Dans ce cas, la mise à jour de la mise en page, par exemple, 61 00:05:35,810 --> 00:05:39,720 est un nom approprié car c'est exactement ce que nous faisons 62 00:05:39,850 --> 00:05:51,420 et là-bas, j'appelle définir la largeur de périphérique disponible et la définir pour obtenir la fenêtre d'obtention des dimensions. largeur et bien sûr également définir la hauteur de l'appareil disponible aux 63 00:05:51,420 --> 00:05:59,410 dimensions obtenir la hauteur de la fenêtre. La mise à jour de la mise en 64 00:05:59,410 --> 00:06:05,680 page est donc la fonction sur laquelle nous pointons sur notre écouteur d'événements sur 65 00:06:06,010 --> 00:06:14,080 les dimensions et, comme auparavant, nous avons besoin d'une fonction de nettoyage pour éviter les rendus inutiles et 66 00:06:14,170 --> 00:06:23,010 dans cette fonction, nous utilisons simplement les dimensions est bon. Maintenant, nous avons juste besoin d'utiliser nos deux états ici - la largeur de l'appareil 67 00:06:23,040 --> 00:06:25,390 disponible et la hauteur de l'appareil disponible. 68 00:06:25,500 --> 00:06:32,190 Donc, si je vérifie ici, j'utilise la largeur de périphérique disponible et ici où je suis intéressé 69 00:06:32,220 --> 00:06:40,170 par la hauteur, j'utilise la hauteur de périphérique disponible. Si nous enregistrons maintenant cela, nous devrions avoir une disposition où, 70 00:06:40,170 --> 00:06:47,070 si nous commençons un jeu, nous avons ce look, mais si nous tournons ensuite en mode paysage, cela change et 71 00:06:47,070 --> 00:06:55,830 bien sûr le change également si nécessaire. Ici sur iOS, nous avons ce look et nous avons ce look si nous tournons. Alors maintenant, cela semble vraiment bien et 72 00:06:55,830 --> 00:07:03,500 cela nous donne l'apparence que nous voulons en fonction de la largeur et de la hauteur disponibles et cela respecte 73 00:07:03,510 --> 00:07:06,960 également les modifications apportées lorsque nous faisons pivoter l'appareil.