1 00:00:02,830 --> 00:00:08,740 Ora abbiamo avuto un altro problema in questa app qui perché una volta che tutto è 2 00:00:08,740 --> 00:00:12,200 risolto qui, se andiamo rapidamente lì, assicurati di 3 00:00:12,220 --> 00:00:16,120 risolverlo, quindi abbiamo questa schermata e anche questa schermata è rotta. 4 00:00:16,120 --> 00:00:17,670 Abbiamo due problemi qui 5 00:00:17,680 --> 00:00:23,190 in realtà, uno è che lo schermo non è scorrevole, il che non è stato 6 00:00:23,200 --> 00:00:29,050 un problema su dispositivi più grandi dove abbiamo più altezza ma qui, non possiamo comprimere tutto 7 00:00:29,050 --> 00:00:36,640 il contenuto sullo schermo, quindi potremmo voler rendiamo scorrevole solo per essere sicuri e / o in alternativa, ci assicuriamo di 8 00:00:36,640 --> 00:00:43,270 essere certi di adattare tutto sullo schermo e di essere sicuri che sia così, dobbiamo andare al gioco 9 00:00:43,270 --> 00:00:50,230 sullo schermo e calcolare le nostre altezze qui dinamicamente, specialmente l'altezza dell'immagine qui che stiamo codificando ora a 300 pixel 10 00:00:50,230 --> 00:00:52,810 che è troppo grande sul piccolo dispositivo. 11 00:00:52,810 --> 00:00:55,950 Ora hai già appreso la soluzione per 12 00:00:56,050 --> 00:01:02,880 questo, possiamo usare di nuovo l'API delle dimensioni importandola da React Native e con le dimensioni importate, 13 00:01:02,890 --> 00:01:11,430 possiamo andare sul nostro foglio di stile e sul contenitore dell'immagine, ora possiamo dire che le dimensioni ottengono la larghezza della 14 00:01:12,150 --> 00:01:21,590 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 15 00:01:21,590 --> 00:01:24,860 avere lo stesso valore di un'altezza, quindi lo 16 00:01:24,860 --> 00:01:25,920 copierò lì. 17 00:01:25,920 --> 00:01:32,180 Importante qui, non usiamo l'altezza perché l'immagine non dovrebbe essere alta il 70% della nostra altezza disponibile, 18 00:01:32,480 --> 00:01:32,960 invece 19 00:01:33,200 --> 00:01:38,390 dovrebbe avere solo la stessa altezza della larghezza e che viene calcolata sulla larghezza 20 00:01:38,420 --> 00:01:45,260 del dispositivo, quindi usiamo la larghezza laggiù anche. Ora qui il raggio del bordo dovrebbe essere la metà di 21 00:01:45,380 --> 00:01:50,840 quello, quindi possiamo usarlo anche qui e poi dividerlo per due e avremo il raggio del bordo perfetto 22 00:01:50,900 --> 00:01:54,170 per quella larghezza calcolata dinamicamente. Quindi questa è una cosa importante. 23 00:01:54,200 --> 00:01:59,030 Ora abbiamo anche un paio di altre dimensioni che stiamo impostando, come il margine verticale qui che abbiamo hardcode 24 00:01:59,030 --> 00:02:07,600 a 30, lo stesso per il contenitore dei risultati e potremmo voler cambiare anche questo. Quindi qui possiamo anche dire che le dimensioni ottengono 25 00:02:07,600 --> 00:02:11,380 la finestra, in questo caso l'altezza e forse 26 00:02:11,380 --> 00:02:21,010 dividere questo per 20 diciamo e vediamo se sembra buono e anche laggiù il margine verticale, forse dividere questo per 40 27 00:02:21,040 --> 00:02:26,720 perché era 15, questo era 30, quindi dividiamo questo per 40, se 28 00:02:26,740 --> 00:02:31,960 lo dividessimo per 20 per avere di nuovo la stessa relazione 29 00:02:31,960 --> 00:02:34,370 tra questi due margini verticali. 30 00:02:34,510 --> 00:02:35,980 Quindi risolviamolo di 31 00:02:36,010 --> 00:02:41,150 nuovo e vediamo qual è il risultato, meglio, ora almeno possiamo vedere 32 00:02:41,180 --> 00:02:44,100 il pulsante ma non è ancora perfetto. 33 00:02:44,240 --> 00:02:50,150 Questo margine qui è sicuramente ancora troppo grande e anche la dimensione del carattere, potremmo ridurre anche questo. 34 00:02:50,330 --> 00:02:56,570 Quindi un'immagine più rotonda, possiamo certamente dividere l'altezza per 30 qui per questo margine che 35 00:02:56,570 --> 00:03:03,970 stiamo impostando e quindi andare a 60 per questo margine verticale del contenitore di questo risultato e per la 36 00:03:04,130 --> 00:03:13,860 dimensione del carattere qui, qui possiamo usare un controllo if se vogliamo e per esempio controlla qui la nostra altezza disponibile e se questo 37 00:03:13,860 --> 00:03:25,210 è più piccolo di 400, allora usiamo 16 qui e altrimenti, usiamo 20. Ora, ultimo ma non meno importante, per assicurarci che possiamo scorrere 38 00:03:25,210 --> 00:03:31,310 perché a volte con tutte le modifiche, non saremo ancora in grado 39 00:03:31,310 --> 00:03:35,400 di adattarlo allo schermo, almeno non senza rendere 40 00:03:35,510 --> 00:03:42,990 tutto molto piccolo, potremmo voler importare quello scorrimento visualizza qui e avvolgi la nostra vista 41 00:03:42,990 --> 00:03:50,730 con quello, quindi aggiungi la vista di scorrimento qui intorno alla nostra vista per renderla scorrevole 42 00:03:50,850 --> 00:03:52,860 e ora diamo un'occhiata 43 00:03:52,880 --> 00:03:53,860 a 44 00:04:03,670 --> 00:04:10,700 questo di nuovo, risolviamolo, ora sembra meglio. Si adatta allo schermo e, se necessario, saremo anche in grado 45 00:04:10,700 --> 00:04:14,090 di farlo scorrere, possiamo vedere che sull'iPhone a proposito, lì se 46 00:04:19,360 --> 00:04:22,390 lo risolviamo, sull'iPhone possiamo sempre scorrere un po 47 00:04:22,390 --> 00:04:27,010 'e rimbalza indietro, abbiamo lo scorrimento abilitato e quindi ora questo sembra buono su 48 00:04:27,040 --> 00:04:32,920 iPhone ma anche su questo dispositivo in cui riduciamo un po 'le dimensioni del carattere, abbiamo lavorato un po' 49 00:04:33,070 --> 00:04:36,420 sulla spaziatura qui e se andasse oltre i nostri confini, 50 00:04:36,520 --> 00:04:45,760 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 51 00:04:45,760 --> 00:04:52,250 davvero a costruire interfacce utente che si adattano bene a diverse dimensioni del dispositivo e, come hai appreso, ci 52 00:04:52,250 --> 00:04:59,230 sono diversi modi di usarlo: per calcolare dinamicamente le dimensioni, sia per larghezza o altezza o margini e ovviamente anche se 53 00:04:59,440 --> 00:05:05,710 le istruzioni per rendere semplicemente contenuto diverso, allegare stili o oggetti di stile diversi in base alle condizioni 54 00:05:05,710 --> 00:05:10,750 di larghezza o altezza che stai impostando qui, ma non è tutto perché gli utenti 55 00:05:10,750 --> 00:05:16,180 potrebbero anche cambiare l'orientamento del dispositivo mentre l'app è in esecuzione e che a volte significa 56 00:05:16,180 --> 00:05:20,440 anche che dobbiamo cambiare lo stile e / o il layout.