Ahora hay una cosa que notarás.
Si ingresa un objetivo aquí y aquí, usaré rápidamente el mismo objetivo una y otra vez, aunque
eso me da
un error, pero la aplicación seguirá funcionando, así que ignoremos la advertencia en la parte inferior.
Si ingresé esto, con la frecuencia que ve en algún momento, superaremos los límites de la pantalla, pero
de forma predeterminada, no puede desplazarse y eso
es algo que puede ser realmente confuso si está comenzando con React Native porque
si viene de la web, allí,
siempre puede desplazarse, el navegador por defecto hace que su página se pueda desplazar si su contenido excede los límites de
la página. Aquí, eso
no es lo mismo,
no se desplaza solo porque su contenido va más allá de los límites de su pantalla,
sino que ya no se puede acceder a su contenido.
Ahora, obviamente, esa no es una opción, es una experiencia de usuario horrible,
queremos tener un contenido desplazable, pero en las aplicaciones nativas, debe ser explícito sobre el hecho de que esta página o parte de esta debe
ser desplazable y es lo mismo en React Native por lo tanto.
Entonces, aquí, lo que podemos hacer es usar otro componente al horno React Native y esa es la vista de desplazamiento y,
como su nombre lo indica, esta es una vista que se puede desplazar.
Así que ahora podemos reemplazar esta vista aquí que contiene nuestros elementos de lista con la vista de desplazamiento. En la vista de desplazamiento, también tiene propiedades que le permiten
configurarlo, simplemente puede colocar el cursor aquí
y presionar el espacio de control para tener una idea de lo que puede establecer o consultar
los documentos oficiales, por
ejemplo, puede establecer horizontal en desplácese horizontalmente, pero aquí, dejaré el valor predeterminado que es el
desplazamiento vertical y simplemente agregando esto, verá que ahora si agrego aprender React Native una docena de veces aquí, así que permítanme
llenar esa
página, ahora esto se puede desplazar como usted puedo ver, ahora puedo desplazar mi contenido y solo la parte que está
envuelta en la vista de desplazamiento.
Podríamos haberlo envuelto alrededor de toda la página, por lo que podríamos haber reemplazado esta vista aquí con una
vista de desplazamiento o ajustar esto con una vista de desplazamiento, para que eso
también funcione, también es algo que podemos hacer y luego toda la página es
desplazable, así que si ahora agrego Learn React Native aquí,
verá que ahora se desplaza toda la página, aquí en iOS incluso puede desplazarse sin elementos, ese
es el comportamiento predeterminado de iOS pero, por supuesto, siempre se recupera, pero eso depende de usted donde agregue esto y aquí solo
quiero tener una subsección de la pantalla que se puede desplazar, así que solo envuelvo esta sección con
la vista
de desplazamiento, pero este es, por supuesto, un componente súper importante para cualquier contenido en el que no pueda garantizar
que se ajuste al pantalla.
Ahora, por supuesto, puede pensar que con todos estos tamaños de dispositivos disponibles, nunca puede
garantizar esto, pero hay ciertos elementos de contenido, como una entrada y un botón que
siempre podrá colocar en la pantalla y que también puede ser configurado para cambiar su tamaño para que quepa en
la pantalla, mientras que hay otro contenido, típicamente listas de datos como esta aquí donde no puede
garantizarlo y donde solo sabe después de 10 o 20 elementos, definitivamente superará cualquier pantalla y esa es la
contenido que desea envolver en una vista de desplazamiento. Otro contenido, como botones de entrada, texto estático codificado,
por lo
que básicamente cualquier contenido en el que sepa cuántos elementos tendrá de antemano por lo general se puede comprimir
en una pantalla con las herramientas adecuadas, es decir, con flexbox, que también funcionará a lo largo de este curso, pero
para contenido generado dinámicamente como este, definitivamente desea una vista de desplazamiento.