Quindi ora con questi primi passaggi di base, se ora compilo un numero qui e continuiamo,
questo mi sembra buono qui,
tutto funziona, se ora iniziamo un gioco,
allora voglio anche ridurre questo spazio che abbiamo qui e voglio anche assicurarmi che la mia scatola sia
laggiù,
quindi questo registro di ipotesi che abbiamo, che anche
questo sembra migliore.
Ora questo è qualcosa che possiamo fare ovviamente sullo schermo del gioco perché quello è lo schermo
che stiamo attualmente visualizzando lì.
Ora per uno ovviamente, è la spaziatura, questo margine superiore sul nostro contenitore inferiore che è questo contenitore, margine superiore è questa distanza
tra il numero qui e il contenitore e voglio cambiarlo. Ora per cambiarlo, possiamo
usare
nuovamente l'API dimensioni.
Quindi, qui, importa nuovamente le dimensioni da React Native e ora laggiù,
possiamo calcolare questo margine in modo dinamico. Quello che possiamo fare qui è che possiamo nuovamente ottenere le dimensioni della
nostra finestra e quindi qui, la larghezza o in questo caso, probabilmente l'altezza e quindi dividere questo
per qualcosa ma questo sarebbe molto ingombrante, potremmo dividere questo per 20 per esempio , entro le 20 e vedi se sembra buono ma
questo è davvero un gioco d'ipotesi, potrebbe non essere quello che vogliamo davvero.
Potremmo invece verificare quanta altezza abbiamo a disposizione e quindi utilizzare una
spaziatura diversa in base a quella. Potremmo verificare se la nostra altezza è maggiore di 600, in tal caso,
vogliamo avere una spaziatura di 20, altrimenti ne abbiamo una su 10. Quindi possiamo anche usare le dimensioni che stiamo
calcolando in una condizione if, in questo caso in un'espressione ternaria qui, ma puoi
usarla anche in un normale controllo if.
Quindi ora possiamo tornare qui e quello che vediamo ora è che quando iniziamo il gioco, non abbiamo un enorme
spazio qui sullo schermo più piccolo, sull'iPhone che è uno schermo più grande, tuttavia abbiamo sicuramente
un divario più grande e per vederlo più chiaramente, puoi ovviamente giocarci su
e per esempio usare 30 per schermi più piccoli e 30 per schermi più grandi e 5 per schermi più
piccoli e ora dovresti assolutamente vederlo.
Qui abbiamo un piccolo gap
e qui, abbiamo un gap più grande.
Quindi possiamo anche usarlo in caso di condizioni.
Ora, con questo, lo riporterò qui a 20 e 5, ma ora spero che questo mostri anche un altro
modo di usarlo.
Puoi usarlo in condizioni che ovviamente ti offrono molta flessibilità nei casi in cui
non vuoi usare la larghezza in un calcolo dinamico ma hai diversi valori hardcoded che vuoi usare in
base ai diversi punti di interruzione che vuoi impostato, un po 'come lo sai dai CSS, dove hai anche
query multimediali e quindi puoi renderizzare cose diverse in base a query
multimediali diverse.
Inoltre, non sei limitato all'utilizzo dell'API delle dimensioni laggiù nel tuo foglio di stile, ovviamente, puoi usarlo ovunque
dove puoi usare Javascript, quindi praticamente ovunque nei tuoi componenti. Puoi anche collegare stili completamente diversi in
base alla larghezza o altezza disponibili. Potremmo anche usare le dimensioni qui
finestra dove assegno il mio stile e, ad esempio, controlla la mia altezza qui, controlla se è maggiore di 600
e, in tal caso, usa il contenitore di pulsanti di stili e, in caso contrario, usa il contenitore di
pulsanti di stili piccolo se avessimo questo classe. Non ce l'ho qui, quindi me ne sbarazzerò, ma è un
altro modo di usarlo, puoi usarlo ovunque esegua Javascript. Ovviamente puoi anche usarlo qui, potresti avere un
if check qui prima di restituire il tuo codice jsx e controllare ottenere l'altezza della finestra, se è maggiore di 600 e in tal
caso, diciamo, restituisci un codice jsx totalmente diverso e quindi questo codice
da allora in poi non funzionerà mai se ritorni qui e solo se non ce la fai in
questo se controlla,
quindi se hai un dispositivo che non è alto come questo, allora lo fai lì.
Quindi sei davvero flessibile qui e usi quella flessibilità per creare i layout che desideri perché è di questo che
si tratta e ciò che ti dà molta flessibilità per le tue app.
Quindi questa è la
spaziatura qui, ora volevo anche cambiare i miei elementi di registro laggiù, è
anche qualcosa che possiamo facilmente fare ovviamente.
Abbiamo le nostre voci di elenco lì e sulle voci di elenco, impostiamo una larghezza del 100% perché impostiamo la larghezza della nostra
lista qui con il contenitore dell'elenco e che è impostato sul 60%.
Ora il 60% sembra piuttosto buono su dispositivi più grandi, penso, ma su
dispositivi più piccoli, potremmo andare più grandi di così.
Ora possiamo ovviamente tentare di nuovo di risolverlo con regole diverse qui in cui impostiamo una larghezza massima e una larghezza minima
e forse possiamo anche usare l'API delle dimensioni per calcolare questo in modo dinamico o usiamo ancora un controllo if.
Qui potremmo dire di nuovo dimensioni ottenere finestra, ottenere la larghezza disponibile in questo caso e
se questo è maggiore di 500, allora
voglio usare il 60%, altrimenti voglio usare l'80%. Quindi ora visualizziamo semplicemente un contenitore elenco più ampio e più
ampio in base alla larghezza disponibile sul dispositivo
su cui
siamo in esecuzione e in realtà usiamo 350 qui invece di 500 perché stiamo
parlando della larghezza, non dell'altezza.
Quindi ora qui se eseguiamo questo su iPhone, abbiamo la stessa larghezza di prima ma sullo schermo più
piccolo, abbiamo oggetti più grandi.
Quindi è anche qualcosa che possiamo fare e ovviamente puoi giocare con il punto di interruzione
che stai effettivamente impostando qui.
puoi provare diverse dimensioni di breakpoint qui.
Naturalmente potresti anche avere più punti
di interruzione, puoi avere espressioni ternarie nidificate qui o prima di scrivere troppe espressioni nidificate, semplicemente imposta qui diversi
oggetti di stile che poi carichi con differenti se controlli che usi lassù. Giusto per darvi un esempio per questo,
potremmo avere un contenitore di elenchi grande qua e là, impostiamo uno flessibile e impostiamo
la nostra larghezza di diciamo 80% perché questo è quello grande e
qui abbiamo quello normale con il 60% .
Ora non ho alcuna condizione se laggiù ma ho due diversi oggetti di
stile e ora abbiamo solo bisogno di attaccare diversi
oggetti di stile lassù, non qui ma qui ovviamente, in questa vista. Bene, per fare questo, possiamo semplicemente impostare una variabile di stile del contenitore
elenco qui per esempio e puntare al contenitore elenco stili che è il nostro predefinito, quindi aggiungere un controllo if qui
dove controlliamo se le dimensioni ottengono la larghezza della finestra e ora se la larghezza qui diciamo più piccolo di 350, quindi se abbiamo
un piccolo dispositivo, allora vogliamo avere il contenitore grande elenco, quindi possiamo impostare lo stile
contenitore elenco, questa variabile
uguale al contenitore elenco stili grande per
puntare a questo oggetto stile e ora possiamo usare quell'oggetto stile qui nella vista in cui abbiamo bisogno
dello stile del contenitore elenco, ora utilizziamo la variabile che contiene un oggetto stile contenitore elenco
diverso in base alla larghezza del nostro dispositivo. E se ora lo salviamo e lo eseguiamo di
nuovo, vedi che sull'iPhone con il dispositivo più grande dove abbiamo più larghezza, abbiamo il contenitore più piccolo e qui
sul telefono Android con il dispositivo più piccolo, con meno larghezza, otteniamo il contenitore più grande.
Quindi è lo stesso risultato di prima
ma un po 'più leggibile e ora potremmo avere più di questi se controlli qui
dove memorizziamo stili diversi qui nello stile del
contenitore elenco che poi utilizziamo laggiù, questo può essere più leggibile che avere espressioni ternarie nidificate laggiù nell'oggetto foglio di stile.
Quindi è così che puoi giocare con questo ed essere consapevole di quella flessibilità dell'API dimensioni è
davvero cruciale qui.