1
00:00:02,400 --> 00:00:09,500
Ora, con quello, se andiamo alla schermata successiva in cui abbiamo un gioco in esecuzione, affrontiamo il problema successivo

2
00:00:09,520 --> 00:00:10,610
lì. In

3
00:00:10,610 --> 00:00:15,680
modalità verticale sembra buono ma se ruotiamo il dispositivo, questo non sembra troppo bello.

4
00:00:15,680 --> 00:00:20,520
Ora qui, una soluzione potrebbe essere semplicemente quella di cambiare un po 'lo stile

5
00:00:20,570 --> 00:00:23,320
se non abbiamo così tanta altezza disponibile.

6
00:00:23,420 --> 00:00:28,150
In alternativa, rendiamo un layout completamente diverso in base allo spazio disponibile,

7
00:00:28,220 --> 00:00:30,470
entrambe sarebbero opzioni che hai.

8
00:00:30,470 --> 00:00:36,920
Ad esempio, potresti provare a renderlo fianco a fianco semplicemente aggiungendo un segno di spunta qui nella schermata di gioco

9
00:00:36,920 --> 00:00:42,620
in cui restituisci un codice jsx totalmente diverso e forse anche con uno stile totalmente diverso e

10
00:00:42,620 --> 00:00:49,820
quindi un layout basato sulla larghezza o altezza disponibili e quindi avresti solo bisogno di impostare un listener che riattivi il tuo

11
00:00:49,820 --> 00:00:51,200
componente, quindi con

12
00:00:51,200 --> 00:00:56,150
set stage proprio come abbiamo fatto qui nella schermata di avvio del gioco per ri-renderizzare

13
00:00:56,150 --> 00:01:02,560
il tuo componente ogni volta che è il caso. Penso che sarebbe interessante e quindi è qualcosa che farò qui.

14
00:01:02,570 --> 00:01:08,740
Quello che farò è che voglio rendere i miei pulsanti qui a sinistra e a destra del contenitore

15
00:01:08,740 --> 00:01:13,370
dei numeri se abbiamo solo un'altezza limitata disponibile e renderlo come abbiamo sempre fatto

16
00:01:13,390 --> 00:01:15,160
se non fosse così.

17
00:01:15,460 --> 00:01:20,560
Quindi voglio rendere il codice jsx totalmente diverso in base alle mie dimensioni.

18
00:01:20,560 --> 00:01:30,540
Quindi qui aggiungerò un controllo if e dirò se le dimensioni ottengono l'altezza della finestra, diciamo se è inferiore a 500

19
00:01:30,670 --> 00:01:33,850
e vedremo se quel valore funziona,

20
00:01:33,850 --> 00:01:37,770
quindi voglio sostanzialmente restituire questo codice jsx da

21
00:01:37,860 --> 00:01:47,770
lì, quindi Lo copierò, lo inserirò tra parentesi qui, tra parentesi ma non voglio avere la mia carta qui, invece avrò

22
00:01:47,770 --> 00:01:55,390
il primo pulsante principale prima del mio contenitore dei numeri, il successivo dopo il contenitore dei

23
00:01:55,390 --> 00:01:59,530
numeri e avrò tutto di quello all'interno di una

24
00:02:02,410 --> 00:02:09,000
nuova visione qui che avvolgerò questo, che dovrebbe mettere queste tre cose in fila.

25
00:02:09,010 --> 00:02:16,180
Quindi aggiungerò uno stile nuovo di zecca qui, gli stili diciamo controlli o come volete nominarlo e ora lo

26
00:02:16,300 --> 00:02:21,400
aggiungo al mio foglio di stile qui e questo è lo stesso foglio

27
00:02:21,400 --> 00:02:27,460
di stile di prima perché imposta solo stili che posso usare ovunque il mio componente indipendentemente

28
00:02:27,460 --> 00:02:31,540
dalle condizioni in cui eseguo il rendering di cosa

29
00:02:31,540 --> 00:02:38,890
e qui imposterò questa direzione flessibile su riga, il valore predefinito è colonna e ora vogliamo avere una riga qui

30
00:02:39,070 --> 00:02:48,360
e imposterò il contenuto giustificato nello spazio intorno e vedremo come sembra. Se ora lo salviamo e iniziamo un nuovo gioco qui in modalità orizzontale, non sembra troppo male,

31
00:02:48,390 --> 00:02:49,470
c'è ancora del

32
00:02:49,470 --> 00:02:54,690
lavoro da fare ma questo è quello che ottengo qui in modalità orizzontale o su dispositivi con altezza limitata.

33
00:02:55,350 --> 00:02:57,370
Sui dispositivi con più altezza,

34
00:02:57,480 --> 00:03:01,530
ottengo ancora la vecchia vista qui, che è ovviamente esattamente quello che voglio.

35
00:03:01,620 --> 00:03:08,260
Ora sistemiamo questa vista qui e quindi possiamo semplicemente andare ai controlli e dare una larghezza di diciamo l'80%

36
00:03:08,260 --> 00:03:16,340
in modo che il contenitore complessivo sia più grande e molto importante, impostare allineare gli elementi qui al centro in modo che il

37
00:03:16,340 --> 00:03:24,340
contenitore dei numeri e i due pulsanti sono tutti centrati verticalmente. E ora con ciò se diamo

38
00:03:24,340 --> 00:03:33,560
un altro tentativo qui, entriamo in questo, sembra molto meglio e funziona come prima, ma ora

39
00:03:33,560 --> 00:03:38,950
abbiamo un layout diverso in base alle nostre dimensioni.

40
00:03:38,990 --> 00:03:44,960
Ora, naturalmente, il problema è che questo layout non cambia se ruotiamo, non la fine del

41
00:03:45,050 --> 00:03:49,560
mondo, ma potremmo voler tornare a quel vecchio layout e

42
00:03:49,670 --> 00:03:54,690
hai imparato come funziona, dobbiamo solo gestirlo con stato e impostare un ascoltatore.

43
00:03:54,690 --> 00:04:00,200
Ora ho già useState e useEffect qui nella schermata di gioco, quindi tutto ciò che dobbiamo

44
00:04:00,200 --> 00:04:08,180
fare nel nostro componente della schermata di gioco è iniziare impostando lo stato qui e alla fine ciò che vogliamo gestire qui è

45
00:04:08,370 --> 00:04:18,370
la larghezza del nostro dispositivo che cambia nel tempo, forse assegna un nome alla larghezza disponibile del dispositivo per chiarire che non stiamo impostando la larghezza del dispositivo

46
00:04:18,370 --> 00:04:21,960
qui, stiamo solo impostando la larghezza rilevata del dispositivo, quindi

47
00:04:22,030 --> 00:04:25,370
potresti anche nominare questa larghezza rilevata del dispositivo.

48
00:04:25,450 --> 00:04:34,090
Lo nominerò larghezza dispositivo disponibile e imposterò larghezza dispositivo disponibile. Lo gestisco con useState dove utilizzo le dimensioni ottieni la larghezza

49
00:04:34,090 --> 00:04:43,930
della finestra per ottenere la larghezza del dispositivo disponibile e, naturalmente, ho appena riconosciuto che è sbagliato, siamo interessati all'altezza, non alla larghezza ma avremo

50
00:04:43,930 --> 00:04:44,470
bisogno

51
00:04:44,470 --> 00:04:46,480
anche della larghezza per

52
00:04:49,520 --> 00:04:52,850
questo controllo qui, quindi avremo bisogno di entrambi.

53
00:04:53,300 --> 00:04:59,250
Quindi abbiamo la larghezza del dispositivo disponibile e gestirò anche un altro stato,

54
00:04:59,270 --> 00:05:00,560
ovvero l'altezza

55
00:05:00,560 --> 00:05:03,990
del nostro dispositivo disponibile, anche qui viene

56
00:05:04,000 --> 00:05:07,300
impostata l'altezza del dispositivo disponibile e quindi

57
00:05:07,300 --> 00:05:11,700
qui inizialmente otteniamo l'altezza del dispositivo disponibile e ora

58
00:05:11,710 --> 00:05:19,710
dobbiamo cambiare entrambi quando il nostro l'orientamento cambia. Per questo, possiamo usare l'effetto, ad esempio qui, impostare una funzione

59
00:05:19,710 --> 00:05:29,310
che viene eseguita ogni volta che viene eseguito il rendering del nostro componente e in questa funzione qui, imposterò le dimensioni, aggiungerò listener di eventi, ascolterò gli eventi

60
00:05:29,330 --> 00:05:35,810
di modifica e configurerò una funzione che dovrebbe attivarsi quando il caso, ad esempio, il layout di aggiornamento

61
00:05:35,810 --> 00:05:39,720
è un nome appropriato perché è esattamente quello che stiamo

62
00:05:39,850 --> 00:05:51,420
facendo e lì, chiamo imposta la larghezza del dispositivo disponibile e lo imposto su dimensioni finestra get. larghezza e, naturalmente, impostare anche l'altezza disponibile del dispositivo alle

63
00:05:51,420 --> 00:05:59,410
dimensioni per ottenere l'altezza della finestra. Il layout di aggiornamento è quindi la funzione a

64
00:05:59,410 --> 00:06:05,680
cui puntiamo sul nostro listener di eventi sulle dimensioni e proprio come prima, abbiamo bisogno di una

65
00:06:06,010 --> 00:06:14,080
funzione di pulizia per evitare rendering non necessari e in questa funzione, utilizziamo semplicemente le dimensioni rimuoviamo il cambiamento del listener

66
00:06:14,170 --> 00:06:23,010
di eventi dove puntiamo al layout di aggiornamento e noi stai bene. Ora non ci resta che usare i nostri due stati qui: larghezza del dispositivo

67
00:06:23,040 --> 00:06:25,390
disponibile e altezza del dispositivo disponibile.

68
00:06:25,500 --> 00:06:32,190
Quindi, se si seleziona qui, utilizzo la larghezza del dispositivo disponibile e qui, dove

69
00:06:32,220 --> 00:06:40,170
sono interessato all'altezza, utilizzo l'altezza del dispositivo disponibile. Se ora lo salviamo, dovremmo avere un layout in cui

70
00:06:40,170 --> 00:06:47,070
se iniziamo un gioco, abbiamo questo aspetto ma se poi ruotiamo in modalità orizzontale, questo cambia e

71
00:06:47,070 --> 00:06:55,830
ovviamente lo cambia anche se necessario. Qui su iOS, abbiamo questo aspetto e abbiamo questo aspetto se ruotiamo. Quindi ora questo sembra davvero buono

72
00:06:55,830 --> 00:07:03,500
e questo ci sta dando l'aspetto che vogliamo in base alla larghezza e all'altezza disponibili e rispetta anche

73
00:07:03,510 --> 00:07:06,960
le modifiche a quello quando ruotiamo il dispositivo.