Ora abbiamo avuto un altro problema in questa app qui perché una volta che tutto è
risolto qui, se andiamo rapidamente lì, assicurati di
risolverlo, quindi abbiamo questa schermata e anche questa schermata è rotta.
Abbiamo due problemi qui
in realtà, uno è che lo schermo non è scorrevole, il che non è stato
un problema su dispositivi più grandi dove abbiamo più altezza ma qui, non possiamo comprimere tutto
il contenuto sullo schermo, quindi potremmo voler rendiamo scorrevole solo per essere sicuri e / o in alternativa, ci assicuriamo di
essere certi di adattare tutto sullo schermo e di essere sicuri che sia così, dobbiamo andare al gioco
sullo schermo e calcolare le nostre altezze qui dinamicamente, specialmente l'altezza dell'immagine qui che stiamo codificando ora a 300 pixel
che è troppo grande sul piccolo dispositivo.
Ora hai già appreso la soluzione per
questo, possiamo usare di nuovo l'API delle dimensioni importandola da React Native e con le dimensioni importate,
possiamo andare sul nostro foglio di stile e sul contenitore dell'immagine, ora possiamo dire che le dimensioni ottengono la larghezza della
finestra e ora diciamo per il contenitore dell'immagine, per l'immagine qui, vogliamo avere una larghezza forse del 70% della larghezza disponibile e vogliamo
avere lo stesso valore di un'altezza, quindi lo
copierò lì.
Importante qui, non usiamo l'altezza perché l'immagine non dovrebbe essere alta il 70% della nostra altezza disponibile,
invece
dovrebbe avere solo la stessa altezza della larghezza e che viene calcolata sulla larghezza
del dispositivo, quindi usiamo la larghezza laggiù anche. Ora qui il raggio del bordo dovrebbe essere la metà di
quello, quindi possiamo usarlo anche qui e poi dividerlo per due e avremo il raggio del bordo perfetto
per quella larghezza calcolata dinamicamente. Quindi questa è una cosa importante.
Ora abbiamo anche un paio di altre dimensioni che stiamo impostando, come il margine verticale qui che abbiamo hardcode
a 30, lo stesso per il contenitore dei risultati e potremmo voler cambiare anche questo. Quindi qui possiamo anche dire che le dimensioni ottengono
la finestra, in questo caso l'altezza e forse
dividere questo per 20 diciamo e vediamo se sembra buono e anche laggiù il margine verticale, forse dividere questo per 40
perché era 15, questo era 30, quindi dividiamo questo per 40, se
lo dividessimo per 20 per avere di nuovo la stessa relazione
tra questi due margini verticali.
Quindi risolviamolo di
nuovo e vediamo qual è il risultato, meglio, ora almeno possiamo vedere
il pulsante ma non è ancora perfetto.
Questo margine qui è sicuramente ancora troppo grande e anche la dimensione del carattere, potremmo ridurre anche questo.
Quindi un'immagine più rotonda, possiamo certamente dividere l'altezza per 30 qui per questo margine che
stiamo impostando e quindi andare a 60 per questo margine verticale del contenitore di questo risultato e per la
dimensione del carattere qui, qui possiamo usare un controllo if se vogliamo e per esempio controlla qui la nostra altezza disponibile e se questo
è più piccolo di 400, allora usiamo 16 qui e altrimenti, usiamo 20. Ora, ultimo ma non meno importante, per assicurarci che possiamo scorrere
perché a volte con tutte le modifiche, non saremo ancora in grado
di adattarlo allo schermo, almeno non senza rendere
tutto molto piccolo, potremmo voler importare quello scorrimento visualizza qui e avvolgi la nostra vista
con quello, quindi aggiungi la vista di scorrimento qui intorno alla nostra vista per renderla scorrevole
e ora diamo un'occhiata
a
questo di nuovo, risolviamolo, ora sembra meglio. Si adatta allo schermo e, se necessario, saremo anche in grado
di farlo scorrere, possiamo vedere che sull'iPhone a proposito, lì se
lo risolviamo, sull'iPhone possiamo sempre scorrere un po
'e rimbalza indietro, abbiamo lo scorrimento abilitato e quindi ora questo sembra buono su
iPhone ma anche su questo dispositivo in cui riduciamo un po 'le dimensioni del carattere, abbiamo lavorato un po'
sulla spaziatura qui e se andasse oltre i nostri confini,
allora potremmo scorrilo, così saremo sempre in grado di interagire con il nostro gioco. Quindi questa è l'API delle dimensioni qui e l'API delle dimensioni ci aiuta
davvero a costruire interfacce utente che si adattano bene a diverse dimensioni del dispositivo e, come hai appreso, ci
sono diversi modi di usarlo: per calcolare dinamicamente le dimensioni, sia per larghezza o altezza o margini e ovviamente anche se
le istruzioni per rendere semplicemente contenuto diverso, allegare stili o oggetti di stile diversi in base alle condizioni
di larghezza o altezza che stai impostando qui, ma non è tutto perché gli utenti
potrebbero anche cambiare l'orientamento del dispositivo mentre l'app è in esecuzione e che a volte significa
anche che dobbiamo cambiare lo stile e / o il layout.