1 00:00:02,180 --> 00:00:03,960 Entonces esa es nuestra aplicación aquí. 2 00:00:04,190 --> 00:00:08,750 Ahora, en esta aplicación, agregamos muchas funcionalidades, pero hay una cosa más que quiero 3 00:00:08,750 --> 00:00:10,910 agregar y es tirar para actualizar. 4 00:00:10,910 --> 00:00:14,640 Digamos que fui capaz de recuperar todos los productos desde el interior de 5 00:00:14,720 --> 00:00:18,380 esta página, así que sin salir y regresar lo que traerá los 6 00:00:18,470 --> 00:00:23,450 últimos productos, pero desde el interior de esta página, simplemente usando este tirón para actualizar el patrón donde 7 00:00:23,450 --> 00:00:27,910 lo arrastra hacia abajo y luego recargas. Afortunadamente, eso es realmente fácil de hacer en React Native si 8 00:00:27,920 --> 00:00:33,960 está usando una lista plana o una vista de desplazamiento porque está integrado en estos componentes. Aquí, en la pantalla de descripción general de productos en 9 00:00:34,000 --> 00:00:40,430 la lista plana, puede implementarlo simplemente agregando accesorios a la lista plana. El primer accesorio está en la actualización, debe agregar y 10 00:00:40,430 --> 00:00:42,500 esto debe apuntar a una 11 00:00:42,500 --> 00:00:48,860 función que se ejecuta cuando el usuario se retira, por lo que cuando el usuario inicia este impulso para 12 00:00:48,860 --> 00:00:51,900 actualizar el anuncio de acción aquí en la pantalla 13 00:00:52,060 --> 00:00:57,290 de resumen de productos, por supuesto, simplemente podemos apunte a cargar productos porque esa es al 14 00:00:57,320 --> 00:00:59,510 final la función que carga nuestro 15 00:00:59,510 --> 00:01:01,610 producto, por lo que es perfecto. 16 00:01:01,610 --> 00:01:09,620 Así que aquí podemos señalar productos de carga. Ahora, al agregar esto, obtenemos automáticamente esta funcionalidad, pero aquí también 17 00:01:09,770 --> 00:01:15,260 tenemos un error, que el accesorio de actualización debe configurarse porque esa es la otra 18 00:01:15,260 --> 00:01:21,980 cosa que siempre debe configurar cuando agrega una actualización. La configuración de actualización desbloquea automáticamente todo este comportamiento 19 00:01:22,010 --> 00:01:23,090 y también 20 00:01:23,090 --> 00:01:28,850 esta buena ruleta que obtienes de forma predeterminada, React Native hará todo eso por ti, pero 21 00:01:28,850 --> 00:01:36,700 solo lo hace si también agregas el accesorio de actualización. El accesorio refrescante es necesario para que React Native sepa cuándo has terminado 22 00:01:36,700 --> 00:01:43,270 y, por lo tanto, esto debería apuntar a una variable, a una variable con estado, por lo que en algún estado que 23 00:01:43,270 --> 00:01:45,280 indique si estás cargando o no 24 00:01:45,340 --> 00:01:49,530 actualmente y, por supuesto, eso es genial porque tenemos nuestro accesorio isLoading aquí, así que 25 00:01:49,840 --> 00:01:54,720 eso nos dice si estamos cargando o no. Solo tendremos un problema, si 26 00:01:55,030 --> 00:01:59,680 estamos cargando, reemplazo todo el contenido de la pantalla y, por supuesto, 27 00:01:59,680 --> 00:02:08,260 eso no es lo que quiero hacer para volver a cargar. Por lo tanto, solucionaremos esto y una solución simple podría ser que eliminemos el conjunto 28 00:02:08,260 --> 00:02:14,800 isLoading part here from load products, configurándolo en true y false y, en su lugar, hagamos eso solo para la carga inicial 29 00:02:14,800 --> 00:02:20,530 aquí en efecto cuando desencadenamos productos de carga cuando se carga el componente y luego aquí, usando esta sintaxis, 30 00:02:20,590 --> 00:02:26,530 establezca esto en falso una vez que hayamos terminado. Podemos hacer eso porque cargar productos devolverá una 31 00:02:26,530 --> 00:02:32,720 promesa porque tiene esta palabra clave asincrónica, por lo tanto, devuelve una promesa y con eso, obtenemos el control de 32 00:02:32,720 --> 00:02:36,050 carga cuando se carga inicialmente pero no cuando se recarga y 33 00:02:36,050 --> 00:02:41,330 eso también significa que cuando visitamos este página, no vemos la ruleta pero eso podría estar bien. 34 00:02:41,340 --> 00:02:43,250 Tenemos algo de contenido allí de todos 35 00:02:43,290 --> 00:02:50,190 modos y si eso se actualiza después de visitar esta página, podría estar bien. Entonces, ahora no estamos configurando que se cargue aquí, pero 36 00:02:50,190 --> 00:02:53,480 ahora podemos establecer un estado diferente aquí, digamos que 37 00:02:53,550 --> 00:02:59,030 es quizás refrescante y establezcamos como refrescante. Aquí quiero administrar un estado 38 00:02:59,100 --> 00:03:04,200 que inicialmente es falso, al igual que isLoading y 39 00:03:04,200 --> 00:03:05,210 ahora 40 00:03:05,220 --> 00:03:17,370 es lo que quiero establecer aquí, por lo que establecer es refrescante a verdadero aquí y también aquí después de intentar capturar, 41 00:03:17,380 --> 00:03:25,950 configurarlo en falso una vez que haya terminado. Entonces, por supuesto, esto funciona de la misma manera que isLoading, pero ahora 42 00:03:26,100 --> 00:03:32,760 no usaré isRefreshing para reemplazar todo el contenido de la pantalla, sino que isRefreshing ahora puede retroalimentarse en la lista plana 43 00:03:32,760 --> 00:03:39,360 en este accesorio refrescante y, por lo tanto, en la carga inicial, esto funciona como antes, pero ahora aquí, tenemos esta 44 00:03:39,360 --> 00:03:45,720 agradable funcionalidad Pull to Refresh, la puedes ver aquí. Puedo tirar hacia abajo, obtener esa rueda giratoria y esto se volverá a 45 00:03:45,780 --> 00:03:51,000 cargar automáticamente y puedo probarlo editando esto en este servidor. Si agrego una capa adicional o un 46 00:03:51,000 --> 00:03:57,890 par de signos de exclamación adicionales allí, podemos obtener esos signos de exclamación aquí tirando y actualizando, aquí puede ver 47 00:03:58,160 --> 00:04:03,530 eso y lo mismo, por supuesto, en Android. Allí también obtuvo esa funcionalidad de 48 00:04:03,530 --> 00:04:10,280 fábrica y es así de fácil puede agregar la funcionalidad Pull to Refresh a su aplicación React Native.