1
00:00:02,130 --> 00:00:03,280
E

2
00:00:03,280 --> 00:00:07,130
lo stile, questi pulsanti? Ora per questi pulsanti,

3
00:00:07,130 --> 00:00:10,600
potresti notare che ora hai un comportamento strano

4
00:00:10,610 --> 00:00:18,600
se lo riscrivi in modalità verticale, anche qui su Android. D'altra parte se cambiamo qualcosa e lo annulliamo solo in

5
00:00:18,690 --> 00:00:24,000
modo che l'app si riavvii e iniziamo in modalità verticale, vedrai che sembra buono

6
00:00:24,000 --> 00:00:28,240
ma ora se andiamo in modalità orizzontale, sembra di nuovo male.

7
00:00:28,260 --> 00:00:36,060
Quindi sostanzialmente, la larghezza dei nostri pulsanti viene registrata all'avvio dell'app e non si regola quando cambiano le dimensioni dello schermo

8
00:00:36,060 --> 00:00:41,670
e ovviamente cambia quando ruotiamo il dispositivo perché larghezza e altezza vengono scambiate, quindi abbiamo più

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

10
00:00:42,330 --> 00:00:47,280
disponibile se noi sei in modalità orizzontale rispetto a noi in modalità verticale.

11
00:00:47,280 --> 00:00:53,730
Il problema è che attualmente nella schermata di avvio del gioco quando impostiamo la larghezza dei nostri pulsanti che

12
00:00:53,730 --> 00:00:59,970
facciamo laggiù, utilizziamo le dimensioni ottenute e questo e questo è molto importante da tenere a mente,

13
00:00:59,970 --> 00:01:02,970
questo viene calcolato solo all'avvio della tua app.

14
00:01:02,970 --> 00:01:08,220
Quindi, quando l'app viene avviata per la prima volta, viene visualizzata la larghezza disponibile e se si avvia

15
00:01:08,220 --> 00:01:08,910
in modalità

16
00:01:08,910 --> 00:01:13,980
verticale, questa è la larghezza della modalità verticale, se si avvia in modalità orizzontale, è la larghezza

17
00:01:13,980 --> 00:01:20,390
della modalità orizzontale e registra e quando si ruota quindi il dispositivo e se quindi si ruota il dispositivo, questo non ricalcola.

18
00:01:20,550 --> 00:01:25,970
Ora, ovviamente, vorrai che questo ricalcoli e c'è una soluzione semplice per quello.

19
00:01:26,100 --> 00:01:33,530
Se hai una larghezza o un'altezza, tutto ciò che ottieni dalle dimensioni che dovrebbe rispettare le

20
00:01:33,570 --> 00:01:41,430
modifiche all'orientamento, quindi che dovrebbe ricalcolare quando cambia l'orientamento, quindi non dovresti usare la larghezza delle dimensioni

21
00:01:41,430 --> 00:01:50,250
laggiù nel tuo foglio di stile ma, invece, devi gestire la larghezza o qualunque sia la proprietà che può

22
00:01:50,570 --> 00:01:57,230
cambiare dinamicamente e che dovrebbe ri-renderizzare l'interfaccia utente quando cambia con lo stato.

23
00:01:57,230 --> 00:02:00,960
Quindi qui nella stringa di gioco iniziale,

24
00:02:01,130 --> 00:02:11,470
abbiamo già useState, ora possiamo anche gestire la nostra larghezza dei pulsanti qui, impostare la larghezza dei pulsanti con useState e

25
00:02:11,500 --> 00:02:18,290
inizializzarla su dimensioni ottenendo la larghezza della finestra divisa per quattro, che è l'impostazione

26
00:02:18,300 --> 00:02:21,220
predefinita con cui ho iniziato.

27
00:02:21,330 --> 00:02:27,660
Ora puoi impostare un listener qui sulle dimensioni, invece di usare get chiamando add listener di eventi e ascolta

28
00:02:28,020 --> 00:02:32,640
l'evento change che si attiva ogni volta che cambiano le dimensioni che di solito

29
00:02:32,640 --> 00:02:35,000
accade quando l'utente ruota il dispositivo.

30
00:02:35,010 --> 00:02:43,950
Quindi, qui, possiamo impostare una funzione, ad esempio aggiornare il layout, che è una funzione in cui chiamo imposta la larghezza del pulsante e reimpostalo sulla mia

31
00:02:43,950 --> 00:02:50,760
larghezza qui, ma la larghezza delle dimensioni sarà diversa in base alla larghezza dello schermo quando ruotiamo ed è questa funzione

32
00:02:50,760 --> 00:02:52,470
che voglio chiamare qui,

33
00:02:52,470 --> 00:02:58,020
quindi è il layout di aggiornamento che voglio chiamare qui senza parentesi qui perché vogliamo solo puntare

34
00:02:58,020 --> 00:03:02,430
su questa funzione in modo che venga chiamata per noi quando le dimensioni

35
00:03:02,460 --> 00:03:07,530
cambiano e questo farà in modo che questo si ripete ogni volta che cambiano le

36
00:03:07,830 --> 00:03:11,160
nostre dimensioni e quindi questo componente verrà nuovamente riprodotto.

37
00:03:11,160 --> 00:03:16,100
Ora dobbiamo solo assicurarci di usare quel pulsante ricalcolato dinamicamente con stato qui.

38
00:03:16,230 --> 00:03:20,130
Possiamo farlo usando stili incorporati anziché un oggetto foglio di stile.

39
00:03:20,130 --> 00:03:25,770
Ora se hai impostato altri stili per il pulsante che non dipendono dalle dimensioni, puoi ovviamente

40
00:03:25,770 --> 00:03:28,170
lasciarli qui nel foglio di stile,

41
00:03:28,170 --> 00:03:32,910
in questo caso non ce l'ho, quindi commenterò questo e potresti quindi fonderlo

42
00:03:32,910 --> 00:03:36,120
con alcuni stili incorporati. Qui dal momento che non abbiamo

43
00:03:36,120 --> 00:03:41,550
altri stili predefiniti, sostituirò semplicemente questo oggetto del foglio di stile a cui stiamo puntando con un oggetto di stile in

44
00:03:41,550 --> 00:03:47,070
linea in cui ho impostato la larghezza uguale alla larghezza del pulsante e ovviamente faccio lo stesso per il mio secondo pulsante

45
00:03:47,130 --> 00:03:51,390
e con quello, abbiamo ora abbiamo uno stile che cambia ogni volta che ruotiamo il dispositivo.

46
00:03:51,390 --> 00:03:55,550
Quindi, se lo salviamo, vedrai che ora sembra buono

47
00:03:55,550 --> 00:04:00,350
indipendentemente da come lo ruotiamo, anche su Android perché questo viene ridistribuito.

48
00:04:00,570 --> 00:04:07,050
Ora una nota importante qui, tuttavia, in questo momento sto impostando un sacco di listener di eventi qui, aggiungo sempre un

49
00:04:07,050 --> 00:04:11,670
nuovo listener di eventi ogni volta che questo componente viene riprodotto nuovamente e non è

50
00:04:11,670 --> 00:04:12,500
quello che

51
00:04:12,720 --> 00:04:19,320
voglio fare e che possiamo usare effetto che è anche incorporato in React e di cui dovresti essere consapevole per avere il

52
00:04:19,410 --> 00:04:23,540
codice che eseguiamo ogni volta che il nostro componente viene eseguito nuovamente il rendering.

53
00:04:23,620 --> 00:04:31,020
Quindi ora posso usare use effect qui e la funzione che voglio eseguire su ogni nuovo rendering è una funzione che alla

54
00:04:31,020 --> 00:04:36,210
fine crea questa funzione di layout di aggiornamento qui e aggiunge il mio listener di

55
00:04:36,270 --> 00:04:41,580
eventi, quindi taglierò questo e lo aggiungerò qui in use effect function e se poi

56
00:04:41,580 --> 00:04:46,950
restituiamo qualcosa qui in use effect, questa è la nostra funzione di cleanup che viene eseguita

57
00:04:46,950 --> 00:04:54,940
subito prima dell'uso di effect in e there, voglio ripulire il mio listener perché qui posso quindi chiamare le dimensioni rimuovere il cambio

58
00:04:54,950 --> 00:04:57,900
di listener di eventi per aggiorna layout.

59
00:04:57,900 --> 00:05:02,840
Quindi ora lo puliamo e ne impostiamo uno nuovo quando il nostro componente esegue nuovamente il rendering, ripulisce quello vecchio,

60
00:05:02,840 --> 00:05:06,610
ne imposta uno nuovo e quindi abbiamo sempre un solo listener di eventi in esecuzione.

61
00:05:06,770 --> 00:05:13,350
Se lo facciamo in questo modo, è semplicemente più pulito e quindi se ora salviamo questo e torniamo indietro,

62
00:05:13,350 --> 00:05:19,650
abbiamo lo stesso comportamento di prima ma ora in modo pulito utilizzando useState e use effect e, soprattutto,

63
00:05:19,950 --> 00:05:26,370
le capacità di ascolto degli eventi di l'API dimensioni che ci consente non solo di impostare le dimensioni una

64
00:05:26,610 --> 00:05:29,040
volta, ma di ricalcolarle quando cambiano.