E
lo stile, questi pulsanti? Ora per questi pulsanti,
potresti notare che ora hai un comportamento strano
se lo riscrivi in modalità verticale, anche qui su Android. D'altra parte se cambiamo qualcosa e lo annulliamo solo in
modo che l'app si riavvii e iniziamo in modalità verticale, vedrai che sembra buono
ma ora se andiamo in modalità orizzontale, sembra di nuovo male.
Quindi sostanzialmente, la larghezza dei nostri pulsanti viene registrata all'avvio dell'app e non si regola quando cambiano le dimensioni dello schermo
e ovviamente cambia quando ruotiamo il dispositivo perché larghezza e altezza vengono scambiate, quindi abbiamo più
larghezza
disponibile se noi sei in modalità orizzontale rispetto a noi in modalità verticale.
Il problema è che attualmente nella schermata di avvio del gioco quando impostiamo la larghezza dei nostri pulsanti che
facciamo laggiù, utilizziamo le dimensioni ottenute e questo e questo è molto importante da tenere a mente,
questo viene calcolato solo all'avvio della tua app.
Quindi, quando l'app viene avviata per la prima volta, viene visualizzata la larghezza disponibile e se si avvia
in modalità
verticale, questa è la larghezza della modalità verticale, se si avvia in modalità orizzontale, è la larghezza
della modalità orizzontale e registra e quando si ruota quindi il dispositivo e se quindi si ruota il dispositivo, questo non ricalcola.
Ora, ovviamente, vorrai che questo ricalcoli e c'è una soluzione semplice per quello.
Se hai una larghezza o un'altezza, tutto ciò che ottieni dalle dimensioni che dovrebbe rispettare le
modifiche all'orientamento, quindi che dovrebbe ricalcolare quando cambia l'orientamento, quindi non dovresti usare la larghezza delle dimensioni
laggiù nel tuo foglio di stile ma, invece, devi gestire la larghezza o qualunque sia la proprietà che può
cambiare dinamicamente e che dovrebbe ri-renderizzare l'interfaccia utente quando cambia con lo stato.
Quindi qui nella stringa di gioco iniziale,
abbiamo già useState, ora possiamo anche gestire la nostra larghezza dei pulsanti qui, impostare la larghezza dei pulsanti con useState e
inizializzarla su dimensioni ottenendo la larghezza della finestra divisa per quattro, che è l'impostazione
predefinita con cui ho iniziato.
Ora puoi impostare un listener qui sulle dimensioni, invece di usare get chiamando add listener di eventi e ascolta
l'evento change che si attiva ogni volta che cambiano le dimensioni che di solito
accade quando l'utente ruota il dispositivo.
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
larghezza qui, ma la larghezza delle dimensioni sarà diversa in base alla larghezza dello schermo quando ruotiamo ed è questa funzione
che voglio chiamare qui,
quindi è il layout di aggiornamento che voglio chiamare qui senza parentesi qui perché vogliamo solo puntare
su questa funzione in modo che venga chiamata per noi quando le dimensioni
cambiano e questo farà in modo che questo si ripete ogni volta che cambiano le
nostre dimensioni e quindi questo componente verrà nuovamente riprodotto.
Ora dobbiamo solo assicurarci di usare quel pulsante ricalcolato dinamicamente con stato qui.
Possiamo farlo usando stili incorporati anziché un oggetto foglio di stile.
Ora se hai impostato altri stili per il pulsante che non dipendono dalle dimensioni, puoi ovviamente
lasciarli qui nel foglio di stile,
in questo caso non ce l'ho, quindi commenterò questo e potresti quindi fonderlo
con alcuni stili incorporati. Qui dal momento che non abbiamo
altri stili predefiniti, sostituirò semplicemente questo oggetto del foglio di stile a cui stiamo puntando con un oggetto di stile in
linea in cui ho impostato la larghezza uguale alla larghezza del pulsante e ovviamente faccio lo stesso per il mio secondo pulsante
e con quello, abbiamo ora abbiamo uno stile che cambia ogni volta che ruotiamo il dispositivo.
Quindi, se lo salviamo, vedrai che ora sembra buono
indipendentemente da come lo ruotiamo, anche su Android perché questo viene ridistribuito.
Ora una nota importante qui, tuttavia, in questo momento sto impostando un sacco di listener di eventi qui, aggiungo sempre un
nuovo listener di eventi ogni volta che questo componente viene riprodotto nuovamente e non è
quello che
voglio fare e che possiamo usare effetto che è anche incorporato in React e di cui dovresti essere consapevole per avere il
codice che eseguiamo ogni volta che il nostro componente viene eseguito nuovamente il rendering.
Quindi ora posso usare use effect qui e la funzione che voglio eseguire su ogni nuovo rendering è una funzione che alla
fine crea questa funzione di layout di aggiornamento qui e aggiunge il mio listener di
eventi, quindi taglierò questo e lo aggiungerò qui in use effect function e se poi
restituiamo qualcosa qui in use effect, questa è la nostra funzione di cleanup che viene eseguita
subito prima dell'uso di effect in e there, voglio ripulire il mio listener perché qui posso quindi chiamare le dimensioni rimuovere il cambio
di listener di eventi per aggiorna layout.
Quindi ora lo puliamo e ne impostiamo uno nuovo quando il nostro componente esegue nuovamente il rendering, ripulisce quello vecchio,
ne imposta uno nuovo e quindi abbiamo sempre un solo listener di eventi in esecuzione.
Se lo facciamo in questo modo, è semplicemente più pulito e quindi se ora salviamo questo e torniamo indietro,
abbiamo lo stesso comportamento di prima ma ora in modo pulito utilizzando useState e use effect e, soprattutto,
le capacità di ascolto degli eventi di l'API dimensioni che ci consente non solo di impostare le dimensioni una
volta, ma di ricalcolarle quando cambiano.