Maintenant, qu'en est-il
du style, qu'en est-il de ces boutons? Maintenant, pour ces boutons,
vous remarquerez peut-être que vous avez maintenant un comportement étrange
si vous le réécrivez en mode portrait, également ici sur Android. D'un autre côté, si nous changeons quelque chose et l'annulons juste pour
que l'application redémarre et que nous commencions en mode portrait, vous verrez que ça a l'air bien
mais maintenant si nous passons en mode paysage, ça a l'air encore mal.
Donc, fondamentalement, la largeur de nos boutons est connectée au démarrage de l'application et ne s'ajuste pas lorsque notre taille d'écran change et bien sûr,
elle change lorsque nous faisons pivoter l'appareil parce que la largeur et la hauteur sont échangées, nous avons
donc
plus de largeur disponible si nous sommes en mode paysage que nous avons en mode portrait.
Le problème est qu'actuellement sur l'écran de démarrage du jeu lorsque nous définissons la largeur de nos boutons que
nous faisons là-bas, nous utilisons les dimensions get et cela et c'est très important de garder à l'esprit,
cela n'est calculé qu'au démarrage de votre application.
Donc, lorsque l'application démarre pour la première fois, cela a un aperçu de la largeur disponible et si elle
démarre en
mode portrait, c'est la largeur en mode portrait, si elle démarre en mode paysage, c'est la largeur en
mode paysage et elle le connecte et lorsque vous faites ensuite pivoter l'appareil et si vous faites ensuite pivoter l'appareil, cela ne recalcule pas.
Bien sûr, vous voudriez que cela recalcule et il existe une solution simple pour cela.
Si vous avez une largeur ou une hauteur, tout ce que vous obtenez à partir de dimensions qui
devraient respecter les changements d'orientation, donc qui devrait être recalculé lorsque l'orientation change, vous ne devez pas utiliser la
largeur des dimensions là-bas dans votre feuille de style, mais à la place, vous devez gérer la largeur ou quelle que soit
la propriété qui peut changer dynamiquement et qui devrait restituer l'interface utilisateur lorsqu'elle change avec l'état.
Donc, ici, dans la chaîne de début de jeu,
nous avons déjà useState, nous pouvons maintenant également gérer la largeur de notre bouton ici, définir la largeur du bouton avec useState et initialiser cela
à des dimensions pour obtenir une largeur de fenêtre divisée par quatre, ce qui est la valeur
par défaut avec laquelle j'ai commencé.
Vous pouvez maintenant configurer un écouteur ici sur les dimensions, au lieu d'utiliser get en appelant ajouter un écouteur d'événements et
écouter l'événement change qui se déclenche chaque fois que les dimensions changent, ce qui est généralement
le cas lorsque l'utilisateur fait pivoter l'appareil.
Donc ici, nous pouvons mettre en place une fonction, mettre à jour la mise en page par exemple qui est une fonction dans laquelle j'appelle définir la largeur du bouton et
la remettre à ma largeur ici mais la largeur des dimensions sera différente en fonction de la largeur de l'écran lorsque nous tournerons et
c'est cette fonction que je
veux appeler ici, donc c'est la mise à jour de la mise en page que je veux appeler ici
sans parenthèses ici parce que nous voulons simplement pointer sur cette fonction afin qu'elle soit
appelée pour nous lorsque les dimensions changent et cela garantira que cela se répète chaque fois que
nos dimensions changent et donc ce composant sera rendu de nouveau.
Maintenant, nous devons juste nous assurer que nous utilisons ce bouton recalculé dynamiquement avec l'état ici.
Nous pouvons le faire en utilisant des styles en ligne au lieu d'un objet de feuille de style.
Maintenant, si vous avez configuré d'autres styles pour le bouton qui ne dépendent pas des dimensions, vous pouvez les laisser ici
dans la feuille de style bien sûr, dans ce
cas, je n'ai pas cela, alors je vais juste commenter cela et vous pouvez ensuite fusionner cela
avec certains styles en ligne. Ici, puisque nous n'avons pas d'autres
styles par défaut, je vais simplement remplacer cet objet de feuille de style que nous pointons par un objet de style
en ligne où je définit la largeur égale à la largeur du bouton et je fais bien sûr la même chose pour
mon deuxième bouton et avec cela, nous le style change désormais à chaque rotation de l'appareil.
Donc, si nous enregistrons cela, vous verrez que cela semble maintenant bien, peu
importe la façon dont nous le faisons pivoter, également sur Android, car cela est rendu à nouveau.
Maintenant, une note importante ici, en ce moment, au moment où je configure un groupe d'écouteurs d'événements ici, j'ajoute toujours un
nouvel écouteur d'événements chaque fois que ce composant est rendu et ce n'est pas
ce que
je veux faire et nous pouvons utiliser use effet qui est également intégré à React et dont vous devez être conscient
d'avoir du code que nous exécutons chaque fois que notre composant est rendu.
Alors maintenant, je peux utiliser use effect ici et la fonction que je veux exécuter sur chaque re-rendu est une fonction qui à la
fin crée cette fonction de mise à jour de mise en page ici et ajoute mon
écouteur d'événements, donc je vais le couper et l'ajouter ici dans la fonction d'effet d'utilisation et si
nous retournons ensuite quelque chose ici dans l'effet d'utilisation, c'est notre fonction de nettoyage qui s'exécute juste
avant que l'effet d'utilisation s'exécute ici et là, je veux nettoyer mon écouteur parce qu'ici je peux appeler les dimensions supprimer le changement d'écouteur d'événement
pour mettre à jour la mise en page.
Alors maintenant, nous nettoyons cela et en configurons un nouveau lorsque notre composant effectue un nouveau rendu, nettoyons l'ancien, en
configurons un nouveau et donc nous n'avons toujours qu'un seul écouteur d'événements en cours d'exécution.
Si nous le faisons comme ça, c'est tout simplement plus propre et donc si nous l'enregistrons maintenant et que nous revenons
en arrière, nous avons le même comportement qu'avant mais maintenant de manière propre en utilisant useState et use effect
et, surtout, les capacités d'écoute des événements de l'API dimensions qui nous permet non seulement de définir des dimensions une
fois mais de les recalculer lorsqu'elles changent.