1 00:00:02,310 --> 00:00:04,600 Ahora hay una cosa que notarás. 2 00:00:05,590 --> 00:00:10,710 Si ingresa un objetivo aquí y aquí, usaré rápidamente el mismo objetivo una y otra vez, aunque 3 00:00:10,720 --> 00:00:12,000 eso me da 4 00:00:12,040 --> 00:00:17,120 un error, pero la aplicación seguirá funcionando, así que ignoremos la advertencia en la parte inferior. 5 00:00:17,140 --> 00:00:22,690 Si ingresé esto, con la frecuencia que ve en algún momento, superaremos los límites de la pantalla, pero 6 00:00:22,720 --> 00:00:25,270 de forma predeterminada, no puede desplazarse y eso 7 00:00:25,400 --> 00:00:29,800 es algo que puede ser realmente confuso si está comenzando con React Native porque 8 00:00:29,800 --> 00:00:31,890 si viene de la web, allí, 9 00:00:31,930 --> 00:00:38,650 siempre puede desplazarse, el navegador por defecto hace que su página se pueda desplazar si su contenido excede los límites de 10 00:00:38,650 --> 00:00:40,720 la página. Aquí, eso 11 00:00:40,750 --> 00:00:42,300 no es lo mismo, 12 00:00:42,340 --> 00:00:48,500 no se desplaza solo porque su contenido va más allá de los límites de su pantalla, 13 00:00:48,520 --> 00:00:52,380 sino que ya no se puede acceder a su contenido. 14 00:00:52,420 --> 00:00:56,530 Ahora, obviamente, esa no es una opción, es una experiencia de usuario horrible, 15 00:00:56,530 --> 00:01:04,330 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 16 00:01:04,540 --> 00:01:08,410 ser desplazable y es lo mismo en React Native por lo tanto. 17 00:01:08,440 --> 00:01:16,060 Entonces, aquí, lo que podemos hacer es usar otro componente al horno React Native y esa es la vista de desplazamiento y, 18 00:01:16,060 --> 00:01:20,710 como su nombre lo indica, esta es una vista que se puede desplazar. 19 00:01:20,710 --> 00:01:29,360 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 20 00:01:29,370 --> 00:01:31,980 configurarlo, simplemente puede colocar el cursor aquí 21 00:01:32,010 --> 00:01:38,020 y presionar el espacio de control para tener una idea de lo que puede establecer o consultar 22 00:01:38,020 --> 00:01:39,390 los documentos oficiales, por 23 00:01:39,390 --> 00:01:45,150 ejemplo, puede establecer horizontal en desplácese horizontalmente, pero aquí, dejaré el valor predeterminado que es el 24 00:01:45,150 --> 00:01:53,240 desplazamiento vertical y simplemente agregando esto, verá que ahora si agrego aprender React Native una docena de veces aquí, así que permítanme 25 00:01:53,240 --> 00:01:54,430 llenar esa 26 00:01:54,740 --> 00:02:02,420 página, ahora esto se puede desplazar como usted puedo ver, ahora puedo desplazar mi contenido y solo la parte que está 27 00:02:02,420 --> 00:02:04,760 envuelta en la vista de desplazamiento. 28 00:02:04,850 --> 00:02:10,850 Podríamos haberlo envuelto alrededor de toda la página, por lo que podríamos haber reemplazado esta vista aquí con una 29 00:02:10,850 --> 00:02:15,250 vista de desplazamiento o ajustar esto con una vista de desplazamiento, para que eso 30 00:02:16,180 --> 00:02:20,770 también funcione, también es algo que podemos hacer y luego toda la página es 31 00:02:20,820 --> 00:02:24,020 desplazable, así que si ahora agrego Learn React Native aquí, 32 00:02:27,950 --> 00:02:33,280 verá que ahora se desplaza toda la página, aquí en iOS incluso puede desplazarse sin elementos, ese 33 00:02:33,280 --> 00:02:40,600 es el comportamiento predeterminado de iOS pero, por supuesto, siempre se recupera, pero eso depende de usted donde agregue esto y aquí solo 34 00:02:40,600 --> 00:02:46,150 quiero tener una subsección de la pantalla que se puede desplazar, así que solo envuelvo esta sección con 35 00:02:46,150 --> 00:02:47,170 la vista 36 00:02:47,170 --> 00:02:53,290 de desplazamiento, pero este es, por supuesto, un componente súper importante para cualquier contenido en el que no pueda garantizar 37 00:02:53,290 --> 00:02:55,040 que se ajuste al pantalla. 38 00:02:55,100 --> 00:02:59,650 Ahora, por supuesto, puede pensar que con todos estos tamaños de dispositivos disponibles, nunca puede 39 00:03:00,250 --> 00:03:04,810 garantizar esto, pero hay ciertos elementos de contenido, como una entrada y un botón que 40 00:03:04,810 --> 00:03:10,780 siempre podrá colocar en la pantalla y que también puede ser configurado para cambiar su tamaño para que quepa en 41 00:03:10,780 --> 00:03:16,000 la pantalla, mientras que hay otro contenido, típicamente listas de datos como esta aquí donde no puede 42 00:03:16,000 --> 00:03:21,760 garantizarlo y donde solo sabe después de 10 o 20 elementos, definitivamente superará cualquier pantalla y esa es la 43 00:03:21,850 --> 00:03:27,770 contenido que desea envolver en una vista de desplazamiento. Otro contenido, como botones de entrada, texto estático codificado, 44 00:03:27,940 --> 00:03:29,040 por lo 45 00:03:29,140 --> 00:03:35,290 que básicamente cualquier contenido en el que sepa cuántos elementos tendrá de antemano por lo general se puede comprimir 46 00:03:35,320 --> 00:03:42,340 en una pantalla con las herramientas adecuadas, es decir, con flexbox, que también funcionará a lo largo de este curso, pero 47 00:03:42,340 --> 00:03:46,360 para contenido generado dinámicamente como este, definitivamente desea una vista de desplazamiento.