1
00:00:02,130 --> 00:00:03,280
Maintenant, qu'en est-il

2
00:00:03,280 --> 00:00:07,130
du style, qu'en est-il de ces boutons? Maintenant, pour ces boutons,

3
00:00:07,130 --> 00:00:10,600
vous remarquerez peut-être que vous avez maintenant un comportement étrange

4
00:00:10,610 --> 00:00:18,600
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

5
00:00:18,690 --> 00:00:24,000
que l'application redémarre et que nous commencions en mode portrait, vous verrez que ça a l'air bien

6
00:00:24,000 --> 00:00:28,240
mais maintenant si nous passons en mode paysage, ça a l'air encore mal.

7
00:00:28,260 --> 00:00:36,060
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,

8
00:00:36,060 --> 00:00:41,670
elle change lorsque nous faisons pivoter l'appareil parce que la largeur et la hauteur sont échangées, nous avons

9
00:00:41,670 --> 00:00:42,320
donc

10
00:00:42,330 --> 00:00:47,280
plus de largeur disponible si nous sommes en mode paysage que nous avons en mode portrait.

11
00:00:47,280 --> 00:00:53,730
Le problème est qu'actuellement sur l'écran de démarrage du jeu lorsque nous définissons la largeur de nos boutons que

12
00:00:53,730 --> 00:00:59,970
nous faisons là-bas, nous utilisons les dimensions get et cela et c'est très important de garder à l'esprit,

13
00:00:59,970 --> 00:01:02,970
cela n'est calculé qu'au démarrage de votre application.

14
00:01:02,970 --> 00:01:08,220
Donc, lorsque l'application démarre pour la première fois, cela a un aperçu de la largeur disponible et si elle

15
00:01:08,220 --> 00:01:08,910
démarre en

16
00:01:08,910 --> 00:01:13,980
mode portrait, c'est la largeur en mode portrait, si elle démarre en mode paysage, c'est la largeur en

17
00:01:13,980 --> 00:01:20,390
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.

18
00:01:20,550 --> 00:01:25,970
Bien sûr, vous voudriez que cela recalcule et il existe une solution simple pour cela.

19
00:01:26,100 --> 00:01:33,530
Si vous avez une largeur ou une hauteur, tout ce que vous obtenez à partir de dimensions qui

20
00:01:33,570 --> 00:01:41,430
devraient respecter les changements d'orientation, donc qui devrait être recalculé lorsque l'orientation change, vous ne devez pas utiliser la

21
00:01:41,430 --> 00:01:50,250
largeur des dimensions là-bas dans votre feuille de style, mais à la place, vous devez gérer la largeur ou quelle que soit

22
00:01:50,570 --> 00:01:57,230
la propriété qui peut changer dynamiquement et qui devrait restituer l'interface utilisateur lorsqu'elle change avec l'état.

23
00:01:57,230 --> 00:02:00,960
Donc, ici, dans la chaîne de début de jeu,

24
00:02:01,130 --> 00:02:11,470
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

25
00:02:11,500 --> 00:02:18,290
à des dimensions pour obtenir une largeur de fenêtre divisée par quatre, ce qui est la valeur

26
00:02:18,300 --> 00:02:21,220
par défaut avec laquelle j'ai commencé.

27
00:02:21,330 --> 00:02:27,660
Vous pouvez maintenant configurer un écouteur ici sur les dimensions, au lieu d'utiliser get en appelant ajouter un écouteur d'événements et

28
00:02:28,020 --> 00:02:32,640
écouter l'événement change qui se déclenche chaque fois que les dimensions changent, ce qui est généralement

29
00:02:32,640 --> 00:02:35,000
le cas lorsque l'utilisateur fait pivoter l'appareil.

30
00:02:35,010 --> 00:02:43,950
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

31
00:02:43,950 --> 00:02:50,760
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

32
00:02:50,760 --> 00:02:52,470
c'est cette fonction que je

33
00:02:52,470 --> 00:02:58,020
veux appeler ici, donc c'est la mise à jour de la mise en page que je veux appeler ici

34
00:02:58,020 --> 00:03:02,430
sans parenthèses ici parce que nous voulons simplement pointer sur cette fonction afin qu'elle soit

35
00:03:02,460 --> 00:03:07,530
appelée pour nous lorsque les dimensions changent et cela garantira que cela se répète chaque fois que

36
00:03:07,830 --> 00:03:11,160
nos dimensions changent et donc ce composant sera rendu de nouveau.

37
00:03:11,160 --> 00:03:16,100
Maintenant, nous devons juste nous assurer que nous utilisons ce bouton recalculé dynamiquement avec l'état ici.

38
00:03:16,230 --> 00:03:20,130
Nous pouvons le faire en utilisant des styles en ligne au lieu d'un objet de feuille de style.

39
00:03:20,130 --> 00:03:25,770
Maintenant, si vous avez configuré d'autres styles pour le bouton qui ne dépendent pas des dimensions, vous pouvez les laisser ici

40
00:03:25,770 --> 00:03:28,170
dans la feuille de style bien sûr, dans ce

41
00:03:28,170 --> 00:03:32,910
cas, je n'ai pas cela, alors je vais juste commenter cela et vous pouvez ensuite fusionner cela

42
00:03:32,910 --> 00:03:36,120
avec certains styles en ligne. Ici, puisque nous n'avons pas d'autres

43
00:03:36,120 --> 00:03:41,550
styles par défaut, je vais simplement remplacer cet objet de feuille de style que nous pointons par un objet de style

44
00:03:41,550 --> 00:03:47,070
en ligne où je définit la largeur égale à la largeur du bouton et je fais bien sûr la même chose pour

45
00:03:47,130 --> 00:03:51,390
mon deuxième bouton et avec cela, nous le style change désormais à chaque rotation de l'appareil.

46
00:03:51,390 --> 00:03:55,550
Donc, si nous enregistrons cela, vous verrez que cela semble maintenant bien, peu

47
00:03:55,550 --> 00:04:00,350
importe la façon dont nous le faisons pivoter, également sur Android, car cela est rendu à nouveau.

48
00:04:00,570 --> 00:04:07,050
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

49
00:04:07,050 --> 00:04:11,670
nouvel écouteur d'événements chaque fois que ce composant est rendu et ce n'est pas

50
00:04:11,670 --> 00:04:12,500
ce que

51
00:04:12,720 --> 00:04:19,320
je veux faire et nous pouvons utiliser use effet qui est également intégré à React et dont vous devez être conscient

52
00:04:19,410 --> 00:04:23,540
d'avoir du code que nous exécutons chaque fois que notre composant est rendu.

53
00:04:23,620 --> 00:04:31,020
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

54
00:04:31,020 --> 00:04:36,210
fin crée cette fonction de mise à jour de mise en page ici et ajoute mon

55
00:04:36,270 --> 00:04:41,580
écouteur d'événements, donc je vais le couper et l'ajouter ici dans la fonction d'effet d'utilisation et si

56
00:04:41,580 --> 00:04:46,950
nous retournons ensuite quelque chose ici dans l'effet d'utilisation, c'est notre fonction de nettoyage qui s'exécute juste

57
00:04:46,950 --> 00:04:54,940
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

58
00:04:54,950 --> 00:04:57,900
pour mettre à jour la mise en page.

59
00:04:57,900 --> 00:05:02,840
Alors maintenant, nous nettoyons cela et en configurons un nouveau lorsque notre composant effectue un nouveau rendu, nettoyons l'ancien, en

60
00:05:02,840 --> 00:05:06,610
configurons un nouveau et donc nous n'avons toujours qu'un seul écouteur d'événements en cours d'exécution.

61
00:05:06,770 --> 00:05:13,350
Si nous le faisons comme ça, c'est tout simplement plus propre et donc si nous l'enregistrons maintenant et que nous revenons

62
00:05:13,350 --> 00:05:19,650
en arrière, nous avons le même comportement qu'avant mais maintenant de manière propre en utilisant useState et use effect

63
00:05:19,950 --> 00:05:26,370
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

64
00:05:26,610 --> 00:05:29,040
fois mais de les recalculer lorsqu'elles changent.