Ora, con quello, se andiamo alla schermata successiva in cui abbiamo un gioco in esecuzione, affrontiamo il problema successivo
lì. In
modalità verticale sembra buono ma se ruotiamo il dispositivo, questo non sembra troppo bello.
Ora qui, una soluzione potrebbe essere semplicemente quella di cambiare un po 'lo stile
se non abbiamo così tanta altezza disponibile.
In alternativa, rendiamo un layout completamente diverso in base allo spazio disponibile,
entrambe sarebbero opzioni che hai.
Ad esempio, potresti provare a renderlo fianco a fianco semplicemente aggiungendo un segno di spunta qui nella schermata di gioco
in cui restituisci un codice jsx totalmente diverso e forse anche con uno stile totalmente diverso e
quindi un layout basato sulla larghezza o altezza disponibili e quindi avresti solo bisogno di impostare un listener che riattivi il tuo
componente, quindi con
set stage proprio come abbiamo fatto qui nella schermata di avvio del gioco per ri-renderizzare
il tuo componente ogni volta che è il caso. Penso che sarebbe interessante e quindi è qualcosa che farò qui.
Quello che farò è che voglio rendere i miei pulsanti qui a sinistra e a destra del contenitore
dei numeri se abbiamo solo un'altezza limitata disponibile e renderlo come abbiamo sempre fatto
se non fosse così.
Quindi voglio rendere il codice jsx totalmente diverso in base alle mie dimensioni.
Quindi qui aggiungerò un controllo if e dirò se le dimensioni ottengono l'altezza della finestra, diciamo se è inferiore a 500
e vedremo se quel valore funziona,
quindi voglio sostanzialmente restituire questo codice jsx da
lì, quindi Lo copierò, lo inserirò tra parentesi qui, tra parentesi ma non voglio avere la mia carta qui, invece avrò
il primo pulsante principale prima del mio contenitore dei numeri, il successivo dopo il contenitore dei
numeri e avrò tutto di quello all'interno di una
nuova visione qui che avvolgerò questo, che dovrebbe mettere queste tre cose in fila.
Quindi aggiungerò uno stile nuovo di zecca qui, gli stili diciamo controlli o come volete nominarlo e ora lo
aggiungo al mio foglio di stile qui e questo è lo stesso foglio
di stile di prima perché imposta solo stili che posso usare ovunque il mio componente indipendentemente
dalle condizioni in cui eseguo il rendering di cosa
e qui imposterò questa direzione flessibile su riga, il valore predefinito è colonna e ora vogliamo avere una riga qui
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,
c'è ancora del
lavoro da fare ma questo è quello che ottengo qui in modalità orizzontale o su dispositivi con altezza limitata.
Sui dispositivi con più altezza,
ottengo ancora la vecchia vista qui, che è ovviamente esattamente quello che voglio.
Ora sistemiamo questa vista qui e quindi possiamo semplicemente andare ai controlli e dare una larghezza di diciamo l'80%
in modo che il contenitore complessivo sia più grande e molto importante, impostare allineare gli elementi qui al centro in modo che il
contenitore dei numeri e i due pulsanti sono tutti centrati verticalmente. E ora con ciò se diamo
un altro tentativo qui, entriamo in questo, sembra molto meglio e funziona come prima, ma ora
abbiamo un layout diverso in base alle nostre dimensioni.
Ora, naturalmente, il problema è che questo layout non cambia se ruotiamo, non la fine del
mondo, ma potremmo voler tornare a quel vecchio layout e
hai imparato come funziona, dobbiamo solo gestirlo con stato e impostare un ascoltatore.
Ora ho già useState e useEffect qui nella schermata di gioco, quindi tutto ciò che dobbiamo
fare nel nostro componente della schermata di gioco è iniziare impostando lo stato qui e alla fine ciò che vogliamo gestire qui è
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
qui, stiamo solo impostando la larghezza rilevata del dispositivo, quindi
potresti anche nominare questa larghezza rilevata del dispositivo.
Lo nominerò larghezza dispositivo disponibile e imposterò larghezza dispositivo disponibile. Lo gestisco con useState dove utilizzo le dimensioni ottieni la larghezza
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
bisogno
anche della larghezza per
questo controllo qui, quindi avremo bisogno di entrambi.
Quindi abbiamo la larghezza del dispositivo disponibile e gestirò anche un altro stato,
ovvero l'altezza
del nostro dispositivo disponibile, anche qui viene
impostata l'altezza del dispositivo disponibile e quindi
qui inizialmente otteniamo l'altezza del dispositivo disponibile e ora
dobbiamo cambiare entrambi quando il nostro l'orientamento cambia. Per questo, possiamo usare l'effetto, ad esempio qui, impostare una funzione
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
di modifica e configurerò una funzione che dovrebbe attivarsi quando il caso, ad esempio, il layout di aggiornamento
è un nome appropriato perché è esattamente quello che stiamo
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
dimensioni per ottenere l'altezza della finestra. Il layout di aggiornamento è quindi la funzione a
cui puntiamo sul nostro listener di eventi sulle dimensioni e proprio come prima, abbiamo bisogno di una
funzione di pulizia per evitare rendering non necessari e in questa funzione, utilizziamo semplicemente le dimensioni rimuoviamo il cambiamento del listener
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
disponibile e altezza del dispositivo disponibile.
Quindi, se si seleziona qui, utilizzo la larghezza del dispositivo disponibile e qui, dove
sono interessato all'altezza, utilizzo l'altezza del dispositivo disponibile. Se ora lo salviamo, dovremmo avere un layout in cui
se iniziamo un gioco, abbiamo questo aspetto ma se poi ruotiamo in modalità orizzontale, questo cambia e
ovviamente lo cambia anche se necessario. Qui su iOS, abbiamo questo aspetto e abbiamo questo aspetto se ruotiamo. Quindi ora questo sembra davvero buono
e questo ci sta dando l'aspetto che vogliamo in base alla larghezza e all'altezza disponibili e rispetta anche
le modifiche a quello quando ruotiamo il dispositivo.