Ora c'è una cosa che noterai.
Se inserisci un obiettivo qui e qui, userò rapidamente lo stesso obiettivo più e più
volte anche se
questo mi dà un errore ma l'app continuerà a funzionare, quindi ignoriamo l'avvertenza in fondo.
Se sono entrato in questo, abbastanza spesso vedi in un certo momento, supereremo i confini dello schermo
ma per impostazione predefinita, non puoi scorrere e
questo è qualcosa che può essere davvero confuso se inizi con React Native
perché se vieni dal web, lì,
puoi sempre scorrere, il browser per impostazione predefinita rende la tua pagina scorrevole se il tuo contenuto supera i confini
della pagina. Qui, non
è lo stesso,
non si ottiene lo scorrimento solo perché i contenuti vanno oltre i confini dello
schermo, invece i contenuti non sono più raggiungibili.
Ora, ovviamente, questa non è un'opzione, è un'esperienza utente orribile, vogliamo
avere un contenuto scorrevole ma nelle app native, devi essere esplicito sul fatto che questa pagina o parte di questa pagina dovrebbe
essere scorrevole ed è la stessa quindi in React Native.
Quindi qui, ciò che possiamo fare è che possiamo usare un altro componente React Native cotto al forno e questa è la vista
di scorrimento e come suggerisce il nome, questa è una vista che è scorrevole.
Quindi ora possiamo sostituire questa vista qui che contiene le nostre voci di elenco con la vista di scorrimento. Nella vista di scorrimento, hai anche proprietà che ti consentono di
configurarlo, puoi semplicemente posizionare il cursore qui
e premere lo spazio di controllo per avere un'idea di ciò che puoi impostare o controllare
i documenti ufficiali, ad
esempio puoi impostare orizzontale su scorri in orizzontale ma qui, lascerò l'impostazione predefinita che è
lo scorrimento verticale e aggiungendo solo questo, vedrai che ora se aggiungo impara React Native una dozzina di volte qui, quindi lasciami
riempire quella
pagina, ora questo è scorrevole come te posso vedere, ora posso scorrere il mio contenuto e solo la parte che
è racchiusa nella vista di scorrimento.
Avremmo potuto avvolgerlo su tutta la pagina, quindi avremmo potuto sostituire questa vista qui con una vista
di scorrimento o avvolgerla con una vista di scorrimento, in modo che
funzionasse anche, è anche qualcosa che possiamo fare e quindi l'intera pagina è
scorrevole, quindi se ora aggiungo impara React Native qui,
vedrai che ora l'intera pagina scorre, qui su iOS puoi persino scorrere senza elementi, questo
è il comportamento predefinito di iOS ma ovviamente rimbalza sempre ma dipende da te dove aggiungi questo e qui voglio solo
avere una sottosezione dello schermo che è scorrevole, quindi avvolgo solo questa sezione con la vista
di scorrimento,
ma questo è ovviamente un componente super importante per qualsiasi contenuto in cui non puoi garantire che
si adatti al schermo.
Ora, naturalmente, potresti pensare che con tutte queste dimensioni di dispositivo disponibili, non puoi
mai garantirlo, ma ci sono alcuni contenuti, come un input e un pulsante che
sarai sempre in grado di adattare allo schermo e che possono anche essere configurato per ridimensionarsi per adattarsi allo
schermo, mentre ci sono altri contenuti, in genere elenchi di dati come questo qui dove non puoi
garantirlo e dove sai solo dopo 10 o 20 articoli, supererà sicuramente qualsiasi schermo e questo è il contenuto
che si desidera avvolgere in una vista di scorrimento. Altri contenuti come pulsanti di input, testo statico
codificato, quindi
praticamente qualsiasi contenuto in cui sai quanti elementi avrai in anticipo in genere può essere schiacciato su
uno schermo con gli strumenti giusti, vale a dire con flexbox che farà anche durante questo corso, ma per
Contenuti generati dinamicamente come questo, vuoi sicuramente una vista a scorrimento.