Entonces esa es nuestra aplicación aquí.
Ahora, en esta aplicación, agregamos muchas funcionalidades, pero hay una cosa más que quiero
agregar y es tirar para actualizar.
Digamos que fui capaz de recuperar todos los productos desde el interior de
esta página, así que sin salir y regresar lo que traerá los
últimos productos, pero desde el interior de esta página, simplemente usando este tirón para actualizar el patrón donde
lo arrastra hacia abajo y luego recargas. Afortunadamente, eso es realmente fácil de hacer en React Native si
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
la lista plana, puede implementarlo simplemente agregando accesorios a la lista plana. El primer accesorio está en la actualización, debe agregar y
esto debe apuntar a una
función que se ejecuta cuando el usuario se retira, por lo que cuando el usuario inicia este impulso para
actualizar el anuncio de acción aquí en la pantalla
de resumen de productos, por supuesto, simplemente podemos apunte a cargar productos porque esa es al
final la función que carga nuestro
producto, por lo que es perfecto.
Así que aquí podemos señalar productos de carga. Ahora, al agregar esto, obtenemos automáticamente esta funcionalidad, pero aquí también
tenemos un error, que el accesorio de actualización debe configurarse porque esa es la otra
cosa que siempre debe configurar cuando agrega una actualización. La configuración de actualización desbloquea automáticamente todo este comportamiento
y también
esta buena ruleta que obtienes de forma predeterminada, React Native hará todo eso por ti, pero
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
y, por lo tanto, esto debería apuntar a una variable, a una variable con estado, por lo que en algún estado que
indique si estás cargando o no
actualmente y, por supuesto, eso es genial porque tenemos nuestro accesorio isLoading aquí, así que
eso nos dice si estamos cargando o no. Solo tendremos un problema, si
estamos cargando, reemplazo todo el contenido de la pantalla y, por supuesto,
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
isLoading part here from load products, configurándolo en true y false y, en su lugar, hagamos eso solo para la carga inicial
aquí en efecto cuando desencadenamos productos de carga cuando se carga el componente y luego aquí, usando esta sintaxis,
establezca esto en falso una vez que hayamos terminado. Podemos hacer eso porque cargar productos devolverá una
promesa porque tiene esta palabra clave asincrónica, por lo tanto, devuelve una promesa y con eso, obtenemos el control de
carga cuando se carga inicialmente pero no cuando se recarga y
eso también significa que cuando visitamos este página, no vemos la ruleta pero eso podría estar bien.
Tenemos algo de contenido allí de todos
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
ahora podemos establecer un estado diferente aquí, digamos que
es quizás refrescante y establezcamos como refrescante. Aquí quiero administrar un estado
que inicialmente es falso, al igual que isLoading y
ahora
es lo que quiero establecer aquí, por lo que establecer es refrescante a verdadero aquí y también aquí después de intentar capturar,
configurarlo en falso una vez que haya terminado. Entonces, por supuesto, esto funciona de la misma manera que isLoading, pero ahora
no usaré isRefreshing para reemplazar todo el contenido de la pantalla, sino que isRefreshing ahora puede retroalimentarse en la lista plana
en este accesorio refrescante y, por lo tanto, en la carga inicial, esto funciona como antes, pero ahora aquí, tenemos esta
agradable funcionalidad Pull to Refresh, la puedes ver aquí. Puedo tirar hacia abajo, obtener esa rueda giratoria y esto se volverá a
cargar automáticamente y puedo probarlo editando esto en este servidor. Si agrego una capa adicional o un
par de signos de exclamación adicionales allí, podemos obtener esos signos de exclamación aquí tirando y actualizando, aquí puede ver
eso y lo mismo, por supuesto, en Android. Allí también obtuvo esa funcionalidad de
fábrica y es así de fácil puede agregar la funcionalidad Pull to Refresh a su aplicación React Native.