1 00:00:02,310 --> 00:00:09,750 Ora c'è una cosa in più quando si creano app mobili per telefoni moderni, possiamo vederlo qui 2 00:00:09,810 --> 00:00:13,880 sull'iPhone, che ho ruotato, ha questa tacca qui. 3 00:00:13,890 --> 00:00:14,520 Destra. 4 00:00:14,580 --> 00:00:19,380 E questa tacca a volte può sovrapporre i tuoi contenuti. 5 00:00:19,380 --> 00:00:26,010 Lo stesso vale per questa barra degli indicatori di Task Manager della schermata principale qui nella parte inferiore dell'iPhone. 6 00:00:26,010 --> 00:00:32,280 Vedi che si sovrappone al nostro nuovo pulsante di gioco e sì, posso scorrere verso l'alto ma rimbalza indietro ed 7 00:00:32,370 --> 00:00:33,990 è sempre sopra quel pulsante. 8 00:00:33,990 --> 00:00:40,370 Quindi questi sono elementi che fanno parte del saggio che può distorcere la nostra interfaccia. 9 00:00:40,380 --> 00:00:47,310 Ad esempio, se avessimo lasciato il testo allineato, potrebbe essere sovrapposto da questa tacca o in questo caso è il pulsante della schermata 10 00:00:47,370 --> 00:00:48,930 principale in cui si trova. 11 00:00:49,290 --> 00:00:54,250 Bene task manager è che la barra dell'indicatore si sovrappone al nostro contenuto. 12 00:00:54,660 --> 00:00:57,090 E ovviamente non è solo il caso degli iPhone. 13 00:00:57,090 --> 00:00:59,760 Potresti avere un problema simile sui dispositivi Android. 14 00:00:59,780 --> 00:01:04,080 Lì hai anche dispositivi con una tacca o con qualcosa del genere. 15 00:01:04,140 --> 00:01:11,640 Ora per assicurarti che la tua app abbia sempre un bell'aspetto su tutti i diversi dispositivi React Native 16 00:01:11,640 --> 00:01:19,680 ha un componente speciale, puoi utilizzare un componente che regola automaticamente i tuoi contenuti per adattarli allo schermo del 17 00:01:19,680 --> 00:01:23,830 tuo dispositivo e rispettare le tacche e altre cose. 18 00:01:23,850 --> 00:01:29,280 Quindi, per esempio qui nel gioco sullo schermo in cui ho questo problema qui su iPhone, possiamo importare 19 00:01:29,310 --> 00:01:33,750 questo componente speciale offerto da React Native e questa è la visualizzazione dell'area sicura. 20 00:01:34,080 --> 00:01:41,640 Si chiama così perché è una vista avvolgente che possiamo mettere attorno al nostro contenuto che sta 21 00:01:41,780 --> 00:01:50,430 contrassegnando l'area sicura l'area in cui possiamo posizionare il nostro contenuto perché lì non avremo problemi con le tacche e 22 00:01:50,460 --> 00:01:51,660 così via. 23 00:01:51,660 --> 00:01:53,770 Ora come si usa per salvare l'area di. 24 00:01:53,780 --> 00:01:57,590 Lo prendi semplicemente e lo avvolgi attorno ai tuoi contenuti. 25 00:01:57,600 --> 00:02:04,710 Quindi intorno alla nostra vista di scorrimento qui, per esempio, possiamo avvolgere tutto ciò sul gioco sullo schermo con 26 00:02:04,710 --> 00:02:08,660 la vista dell'area sicura e questo è importante a proposito. 27 00:02:08,660 --> 00:02:12,640 Le viste dell'area sicura devono sempre includere la vista più in alto. 28 00:02:12,650 --> 00:02:17,170 Quindi in questo caso questa vista di scorrimento qui, quindi ora è così sicura. 29 00:02:17,180 --> 00:02:26,140 Se torniamo indietro e attraversiamo il nostro gioco molto velocemente qui su iPhone, iniziamo un nuovo gioco cinquantacinque è il numero 30 00:02:26,140 --> 00:02:28,480 e lo risolviamo, quindi quello 31 00:02:33,070 --> 00:02:38,200 che vedi è qualcosa di interessante il problema è peggiorato ancora. 32 00:02:38,200 --> 00:02:45,910 Ben prima di occuparcene, tieni presente che queste barre di scorrimento che vedi qui a destra ora 33 00:02:45,910 --> 00:02:48,040 sono un po 'rientrate. 34 00:02:48,040 --> 00:02:53,500 Non è totalmente a destra e quella è già una vista sicura dell'area con 35 00:02:53,500 --> 00:03:01,840 qualche effetto che aggiunge un po 'di imbottitura a sinistra e a destra per assicurarsi che rispettiamo il de notch che occuperebbe un 36 00:03:01,840 --> 00:03:09,730 po' di spazio lì e ci darebbe un po 'di imbottitura che il nostro contenuto non è assolutamente sovrapposto al notch. 37 00:03:09,730 --> 00:03:13,030 Ma ovviamente abbiamo un problema laggiù in fondo. 38 00:03:13,030 --> 00:03:18,040 Il motivo è che non sto davvero usando la vista dell'area di salvataggio come la mia vista più in alto. 39 00:03:18,040 --> 00:03:22,930 Quindi rimuoviamolo da lì dal gioco sullo schermo perché qual è la nostra vista dall'alto. 40 00:03:23,020 --> 00:03:26,190 Bene, questo è nel file di scacchi dell'app alla fine lì. 41 00:03:26,230 --> 00:03:33,750 Abbiamo i nostri contenuti questa vista qui dove dobbiamo intestazione e quindi qualunque caricamento degli spettatori. 42 00:03:33,770 --> 00:03:39,100 Quindi, ad esempio, l'intestazione non fa parte della sua vista dell'area di salvataggio e sicuramente dovrebbe esserlo. 43 00:03:39,110 --> 00:03:49,130 Quindi importiamo la vista Area di sicurezza qui nel file jazz dell'app e avvolgiamo questa vista qui con essa in questo modo, 44 00:03:49,130 --> 00:03:58,760 quindi ora con questo salviamola e diamo uno sguardo numerico con l'attesa per il ricaricamento dell'app e ciò che vediamo 45 00:03:58,850 --> 00:04:02,750 è vuoto schermo ora la soluzione è semplice. 46 00:04:02,780 --> 00:04:08,360 Prendiamo lo stile che abbiamo applicato a te e applichiamo l'area Salva di te e ora liberiamoci di questa 47 00:04:08,380 --> 00:04:08,980 altra vista. 48 00:04:08,990 --> 00:04:15,090 Perché ora sostituisce semplicemente la nostra visione normale qui e ora funziona e 49 00:04:15,180 --> 00:04:19,590 ora andiamo di nuovo per quel gioco risolviamo 50 00:04:23,720 --> 00:04:28,160 rapidamente ciò che ora vedi è morto qui in fondo. 51 00:04:28,160 --> 00:04:30,960 Ora abbiamo un po 'di spazio in più tra quello. 52 00:04:31,100 --> 00:04:36,700 Voglio andare alla barra del task manager qui e al nuovo pulsante di gioco che non avevamo prima. 53 00:04:36,740 --> 00:04:42,350 Abbiamo anche la spaziatura a sinistra e a destra qui per rispettare la tacca in modo che questo non si sovrapponga mai al 54 00:04:42,350 --> 00:04:42,790 contenuto. 55 00:04:42,800 --> 00:04:48,690 Potremmo avere a sinistra lì e abbiamo qualche imbottitura extra nella parte superiore e inferiore. 56 00:04:48,770 --> 00:04:56,180 Ora, ovviamente, la nostra intestazione non è molto bella con questa spaziatura aggiuntiva qui ed è in realtà qualcosa di cui 57 00:04:56,180 --> 00:05:01,270 ci occuperemo nel modulo di navigazione o in realtà ci occuperemo di noi. 58 00:05:01,280 --> 00:05:05,690 Non dovremo fare molto lì, ma di nuovo questo non è qualcosa di cui dobbiamo preoccuparci. 59 00:05:05,690 --> 00:05:11,460 Pertanto, ciò di cui possiamo preoccuparci è che i nostri contenuti sono sempre visibili e con l'area 60 00:05:11,460 --> 00:05:14,210 sicura di te puoi assicurarti che lo sia. 61 00:05:14,210 --> 00:05:20,050 Ora ciò non significa che devi avvolgere tutti i tuoi contenuti o l'intera app in 62 00:05:20,060 --> 00:05:26,930 un'area sicura per tutto il tempo come vedrai nel modulo successivo quando parleremo tutti della navigazione in molte app 63 00:05:26,930 --> 00:05:33,800 che utilizzerai effettivamente una libreria che si occupa di questo in molti casi per te la libreria di navigazione 64 00:05:33,830 --> 00:05:34,700 utilizzerà lì. 65 00:05:34,940 --> 00:05:39,980 Quindi in molte app perché la maggior parte delle tue app avrà la navigazione non dovrai gestirle 66 00:05:39,980 --> 00:05:40,790 solo manualmente. 67 00:05:40,940 --> 00:05:46,460 Ma se stai costruendo un'app in cui non hai altre librerie che si occupano di questa come questa app, ti 68 00:05:46,460 --> 00:05:52,760 viene in mente quando prendo in considerazione l'idea di avvolgere i tuoi contenuti con una vista dell'area di salvataggio se altrimenti i contenuti 69 00:05:52,760 --> 00:05:53,420 sono sovrapposti.