Maintenant, avec cela, si nous allons à l'écran suivant où nous avons un jeu de course, nous sommes confrontés au problème
suivant. En
mode portrait, cela semble bon, mais si nous faisons pivoter l'appareil, cela ne semble pas trop bon.
Maintenant, ici, une solution pourrait simplement être de changer un peu le style si
nous n'avons pas autant de hauteur disponible.
Alternativement, nous rendons une disposition totalement différente en fonction de l'espace disponible, les deux
seraient des options que vous avez.
Vous pouvez par exemple essayer de rendre cela côte à côte en ajoutant simplement une vérification if ici dans votre
écran de jeu où vous retournez un code jsx totalement différent et peut-être aussi avec un style totalement
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
qui restitue votre
composant, donc avec l'étape définie comme nous l'avons fait ici dans l'écran de démarrage du jeu
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.
Ce que je vais faire, c'est que je veux rendre mes boutons ici à gauche et à droite du conteneur de numéros
si nous n'avons qu'une hauteur limitée disponible et le rendre comme nous l'avons toujours fait si
ce n'est pas le cas.
Je veux donc rendre un code jsx totalement différent en fonction de mes dimensions.
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
à 500 et que nous verrons si
cette valeur fonctionne, alors je veux retourner essentiellement ce
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
ma carte ici, à la place, j'aurai le premier bouton principal avant mon conteneur de numéro, le suivant après
le conteneur de numéro et j'aurai tout de cela à
l'intérieur d'une nouvelle vue ici que je vais envelopper, qui devrait exposer ces trois choses d'affilée.
Je vais donc ajouter un tout nouveau style ici, des styles disons des contrôles ou tout ce que vous voulez pour le
nommer et maintenant j'ajoute ceci à ma feuille de style ici et c'est la même feuille
de style qu'avant car il définit simplement des styles que je peux utiliser n'importe où dans mon composant,
peu importe dans quelles conditions je rend quoi et ici, je
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
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
l'air trop mal, encore
du travail à faire, mais c'est maintenant ce que j'obtiens ici en mode paysage ou sur des appareils avec une hauteur limitée.
Sur les appareils avec plus de hauteur,
j'ai toujours l'ancienne vue ici, ce qui est bien sûr exactement ce que je veux.
Maintenant, corrigeons cette vue ici et donc nous pouvons simplement aller aux contrôles et donner une largeur de disons
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
conteneur de nombre et les deux boutons sont tous centrés verticalement. Et maintenant, avec cela, si nous donnons un
nouvel essai ici, nous entrons ici, cela semble beaucoup mieux et cela fonctionne de la même manière qu'auparavant, mais
maintenant nous avons une disposition différente en fonction de nos dimensions.
Maintenant, bien sûr, le problème est que cette disposition ne change pas si nous tournons, pas la fin du monde,
mais nous pourrions vouloir revenir à cette ancienne disposition et vous avez appris comment
cela fonctionne, nous avons juste besoin de gérer cela avec l'état et le définir un auditeur.
Maintenant, j'ai déjà useState et useEffect ici dans l'écran de jeu, donc tout ce que nous devons
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
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,
nous ne faisons que définir la largeur de périphérique détectée, vous
pouvez donc également nommer cette largeur de périphérique détectée.
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
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
nous
aurons également besoin de la largeur
pour cette vérification ici, nous aurons donc besoin des deux.
Nous avons donc la largeur de périphérique disponible et je gérerai également un autre état,
c'est la
hauteur de notre périphérique disponible, ici aussi, c'est
la hauteur de périphérique disponible définie et donc
ici initialement, nous obtenons la hauteur de périphérique disponible et maintenant
nous devons changer les deux lorsque notre changements d'orientation. Pour cela, nous pouvons utiliser l'effet par exemple ici, configurer une fonction qui
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
fonction qui devrait se déclencher lorsque c'est Dans ce cas, la mise à jour de la mise en page, par exemple,
est un nom approprié car c'est exactement ce que nous faisons
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
dimensions obtenir la hauteur de la fenêtre. La mise à jour de la mise en
page est donc la fonction sur laquelle nous pointons sur notre écouteur d'événements sur
les dimensions et, comme auparavant, nous avons besoin d'une fonction de nettoyage pour éviter les rendus inutiles et
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
disponible et la hauteur de l'appareil disponible.
Donc, si je vérifie ici, j'utilise la largeur de périphérique disponible et ici où je suis intéressé
par la hauteur, j'utilise la hauteur de périphérique disponible. Si nous enregistrons maintenant cela, nous devrions avoir une disposition où,
si nous commençons un jeu, nous avons ce look, mais si nous tournons ensuite en mode paysage, cela change et
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
cela nous donne l'apparence que nous voulons en fonction de la largeur et de la hauteur disponibles et cela respecte
également les modifications apportées lorsque nous faisons pivoter l'appareil.