1 00:00:02,230 --> 00:00:04,920 A volte, tuttavia, non puoi semplicemente ottenere il 2 00:00:04,930 --> 00:00:10,720 layout giusto con larghezza percentuale e pixel codificati in questo modo, a volte devi davvero sapere 3 00:00:10,720 --> 00:00:12,210 quanti pixel hai 4 00:00:12,340 --> 00:00:18,130 a disposizione, ad esempio qui sui pulsanti in cui impostiamo una larghezza di 100, impostiamo 100 5 00:00:18,130 --> 00:00:19,990 indipendentemente dalle dimensioni del dispositivo. 6 00:00:19,990 --> 00:00:24,460 Ora in realtà, sappiamo che vogliamo avere due pulsanti uno accanto all'altro. 7 00:00:24,550 --> 00:00:31,960 Quindi ciò che possiamo fare è semplicemente assicurarci di prendere una larghezza del pulsante che si adatti sempre allo schermo, non 8 00:00:31,960 --> 00:00:33,830 importa quanto sia piccolo 9 00:00:33,850 --> 00:00:39,460 e per questo, dobbiamo scoprire quanti pixel abbiamo disponibili in larghezza e questo è qualcosa che 10 00:00:39,460 --> 00:00:44,170 possiamo scoprilo con l'aiuto di React Native. Lì da React Native, 11 00:00:44,170 --> 00:00:48,880 qui puoi importare l'oggetto dimensioni, dimensioni è il nome. 12 00:00:48,940 --> 00:00:55,720 Ora questo non è un componente che usi, ma questo è un oggetto che ti consente di 13 00:00:55,810 --> 00:00:58,380 scoprire quanta larghezza hai a disposizione. 14 00:00:58,420 --> 00:01:04,270 Ora possiamo usarlo per esempio laggiù dove impostiamo la nostra larghezza del pulsante, invece di impostarla in 15 00:01:04,780 --> 00:01:07,080 questo modo, possiamo impostare la nostra 16 00:01:07,210 --> 00:01:12,850 larghezza sulle dimensioni e quindi c'è un metodo get in cui puoi ottenere le dimensioni della finestra. 17 00:01:12,850 --> 00:01:14,440 Puoi anche ottenerlo dallo 18 00:01:14,440 --> 00:01:21,700 schermo, la differenza tra finestra e schermo conta solo su Android dove con finestra, l'altezza della barra di stato sarà esclusa 19 00:01:21,700 --> 00:01:23,640 dal calcolo e quindi questa 20 00:01:23,740 --> 00:01:26,110 sarà davvero, bene la parte dello schermo 21 00:01:26,260 --> 00:01:28,720 in cui i tuoi contenuti saranno vivere dentro. 22 00:01:28,780 --> 00:01:32,130 Quindi in genere dovresti usare la finestra qui perché su iOS 23 00:01:32,130 --> 00:01:38,800 non importa, su Android è garantito per essere la parte dello schermo in cui l'interfaccia utente si trova davvero senza quella barra 24 00:01:38,800 --> 00:01:40,110 di stato in alto. 25 00:01:40,180 --> 00:01:46,390 Quindi, in genere, potresti voler utilizzare la finestra qui per ottenere la stanza reale che hai a disposizione per il tuo layout, 26 00:01:46,390 --> 00:01:52,600 le dimensioni reali che puoi utilizzare per il tuo layout. Ora ciò che ti dà è un oggetto in cui 27 00:01:52,750 --> 00:01:56,470 puoi ottenere un paio di proprietà, quattro per essere precisi: la scala 28 00:01:56,470 --> 00:02:01,540 dei caratteri impostata dall'utente, quindi ad esempio se gli utenti vogliono avere caratteri più grandi, allora 29 00:02:01,540 --> 00:02:03,560 puoi ottenere il moltiplicatore qui con scala 30 00:02:03,670 --> 00:02:09,610 dei caratteri, ma soprattutto, ottieni la larghezza e l'altezza e se otteniamo la larghezza qui, allora otteniamo la larghezza 31 00:02:09,610 --> 00:02:11,050 complessiva del dispositivo 32 00:02:11,050 --> 00:02:12,580 su cui gira questa app. 33 00:02:12,580 --> 00:02:19,390 Ora sappiamo che vogliamo spremere almeno due pulsanti in questo dispositivo qui, quindi potremmo semplicemente 34 00:02:19,390 --> 00:02:25,730 dividerlo per due, quindi ora ogni pulsante è largo la metà del dispositivo. 35 00:02:25,730 --> 00:02:30,190 Ora se lo salviamo, non otteniamo davvero l'aspetto che vogliamo perché, ovviamente, è 36 00:02:30,190 --> 00:02:35,620 troppo grande, ma se lo dividiamo per tre, ad esempio, questo sembra già migliore sul piccolo 37 00:02:35,620 --> 00:02:37,060 schermo, non su 38 00:02:37,060 --> 00:02:42,520 quello grande, ma che ne dici di quattro? Se ne prendiamo quattro, allora abbiamo un sacco di spazio 39 00:02:42,520 --> 00:02:49,690 per tutto l'altro spazio di cui abbiamo bisogno come la spaziatura attorno al nostro contenitore e assicuriamo che i nostri pulsanti rispettino sempre le dimensioni del dispositivo. 40 00:02:49,720 --> 00:02:55,510 Ora ovviamente qui, avresti potuto ottenere qualcosa di simile impostando la larghezza su una percentuale, come 41 00:02:55,510 --> 00:03:00,760 il 40% qui, ma volevo anche introdurre qui l'API delle dimensioni che utilizzeremo anche 42 00:03:00,760 --> 00:03:01,550 in seguito. 43 00:03:01,570 --> 00:03:07,480 È un'ottima API per scoprire quanti pixel hai a disposizione sulla larghezza e sull'altezza sul dispositivo o in 44 00:03:07,870 --> 00:03:09,140 esecuzione e questo 45 00:03:09,190 --> 00:03:15,670 è importante, dove la percentuale qui si riferisce sempre alla vista padre diretta e non sempre alla larghezza disponibile del 46 00:03:15,670 --> 00:03:17,560 dispositivo , questo è solo 47 00:03:17,650 --> 00:03:20,880 il caso del genitore più in alto, per così dire, 48 00:03:20,890 --> 00:03:28,330 quindi nella vista più in alto che stai eseguendo il rendering. Dimensioni finestra get ti dà sempre le dimensioni per l'intero 49 00:03:28,330 --> 00:03:30,750 dispositivo, indipendentemente da dove lo usi. 50 00:03:30,760 --> 00:03:38,480 Quindi la larghezza qui è sempre la larghezza del nostro schermo sul dispositivo e mai del genitore o altro. 51 00:03:38,560 --> 00:03:43,390 Quindi questo può essere davvero utile se vuoi modellare qualcosa in un certo modo o 52 00:03:43,390 --> 00:03:48,100 ridimensionare qualcosa in un certo modo perché ti dice quanta larghezza hai a disposizione.