Ora c'è una cosa in più quando si creano app mobili per telefoni moderni, possiamo vederlo qui
sull'iPhone, che ho ruotato, ha questa tacca qui.
Destra.
E questa tacca a volte può sovrapporre i tuoi contenuti.
Lo stesso vale per questa barra degli indicatori di Task Manager della schermata principale qui nella parte inferiore dell'iPhone.
Vedi che si sovrappone al nostro nuovo pulsante di gioco e sì, posso scorrere verso l'alto ma rimbalza indietro ed
è sempre sopra quel pulsante.
Quindi questi sono elementi che fanno parte del saggio che può distorcere la nostra interfaccia.
Ad esempio, se avessimo lasciato il testo allineato, potrebbe essere sovrapposto da questa tacca o in questo caso è il pulsante della schermata
principale in cui si trova.
Bene task manager è che la barra dell'indicatore si sovrappone al nostro contenuto.
E ovviamente non è solo il caso degli iPhone.
Potresti avere un problema simile sui dispositivi Android.
Lì hai anche dispositivi con una tacca o con qualcosa del genere.
Ora per assicurarti che la tua app abbia sempre un bell'aspetto su tutti i diversi dispositivi React Native
ha un componente speciale, puoi utilizzare un componente che regola automaticamente i tuoi contenuti per adattarli allo schermo del
tuo dispositivo e rispettare le tacche e altre cose.
Quindi, per esempio qui nel gioco sullo schermo in cui ho questo problema qui su iPhone, possiamo importare
questo componente speciale offerto da React Native e questa è la visualizzazione dell'area sicura.
Si chiama così perché è una vista avvolgente che possiamo mettere attorno al nostro contenuto che sta
contrassegnando l'area sicura l'area in cui possiamo posizionare il nostro contenuto perché lì non avremo problemi con le tacche e
così via.
Ora come si usa per salvare l'area di.
Lo prendi semplicemente e lo avvolgi attorno ai tuoi contenuti.
Quindi intorno alla nostra vista di scorrimento qui, per esempio, possiamo avvolgere tutto ciò sul gioco sullo schermo con
la vista dell'area sicura e questo è importante a proposito.
Le viste dell'area sicura devono sempre includere la vista più in alto.
Quindi in questo caso questa vista di scorrimento qui, quindi ora è così sicura.
Se torniamo indietro e attraversiamo il nostro gioco molto velocemente qui su iPhone, iniziamo un nuovo gioco cinquantacinque è il numero
e lo risolviamo, quindi quello
che vedi è qualcosa di interessante il problema è peggiorato ancora.
Ben prima di occuparcene, tieni presente che queste barre di scorrimento che vedi qui a destra ora
sono un po 'rientrate.
Non è totalmente a destra e quella è già una vista sicura dell'area con
qualche effetto che aggiunge un po 'di imbottitura a sinistra e a destra per assicurarsi che rispettiamo il de notch che occuperebbe un
po' di spazio lì e ci darebbe un po 'di imbottitura che il nostro contenuto non è assolutamente sovrapposto al notch.
Ma ovviamente abbiamo un problema laggiù in fondo.
Il motivo è che non sto davvero usando la vista dell'area di salvataggio come la mia vista più in alto.
Quindi rimuoviamolo da lì dal gioco sullo schermo perché qual è la nostra vista dall'alto.
Bene, questo è nel file di scacchi dell'app alla fine lì.
Abbiamo i nostri contenuti questa vista qui dove dobbiamo intestazione e quindi qualunque caricamento degli spettatori.
Quindi, ad esempio, l'intestazione non fa parte della sua vista dell'area di salvataggio e sicuramente dovrebbe esserlo.
Quindi importiamo la vista Area di sicurezza qui nel file jazz dell'app e avvolgiamo questa vista qui con essa in questo modo,
quindi ora con questo salviamola e diamo uno sguardo numerico con l'attesa per il ricaricamento dell'app e ciò che vediamo
è vuoto schermo ora la soluzione è semplice.
Prendiamo lo stile che abbiamo applicato a te e applichiamo l'area Salva di te e ora liberiamoci di questa
altra vista.
Perché ora sostituisce semplicemente la nostra visione normale qui e ora funziona e
ora andiamo di nuovo per quel gioco risolviamo
rapidamente ciò che ora vedi è morto qui in fondo.
Ora abbiamo un po 'di spazio in più tra quello.
Voglio andare alla barra del task manager qui e al nuovo pulsante di gioco che non avevamo prima.
Abbiamo anche la spaziatura a sinistra e a destra qui per rispettare la tacca in modo che questo non si sovrapponga mai al
contenuto.
Potremmo avere a sinistra lì e abbiamo qualche imbottitura extra nella parte superiore e inferiore.
Ora, ovviamente, la nostra intestazione non è molto bella con questa spaziatura aggiuntiva qui ed è in realtà qualcosa di cui
ci occuperemo nel modulo di navigazione o in realtà ci occuperemo di noi.
Non dovremo fare molto lì, ma di nuovo questo non è qualcosa di cui dobbiamo preoccuparci.
Pertanto, ciò di cui possiamo preoccuparci è che i nostri contenuti sono sempre visibili e con l'area
sicura di te puoi assicurarti che lo sia.
Ora ciò non significa che devi avvolgere tutti i tuoi contenuti o l'intera app in
un'area sicura per tutto il tempo come vedrai nel modulo successivo quando parleremo tutti della navigazione in molte app
che utilizzerai effettivamente una libreria che si occupa di questo in molti casi per te la libreria di navigazione
utilizzerà lì.
Quindi in molte app perché la maggior parte delle tue app avrà la navigazione non dovrai gestirle
solo manualmente.
Ma se stai costruendo un'app in cui non hai altre librerie che si occupano di questa come questa app, ti
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
sono sovrapposti.