Cómo cargar datos dinámicamente con paginación personalizada en React Native

La paginación se refiere al sistema de dividir grandes cantidades de datos en partes o páginas más pequeñas y manejables para mejorar el rendimiento y la facilidad de uso. La paginación personalizada, si se implementa correctamente, puede proporcionar una mejor experiencia de usuario. Aprenda a crear una solución de paginación personalizada en React Native que le permita cargar datos de forma dinámica.

Comprender la paginación personalizada

Con la paginación personalizada, los desarrolladores pueden crear un mecanismo de paginación que se adapte a los requisitos específicos de su aplicación. La paginación personalizada puede implicar el diseño de una interfaz de usuario única para navegar entre páginas, implementar algoritmos para obtener datos de una base de datos o API, o incorporando funciones como el desplazamiento infinito o la carga diferida.

Ventajas de la paginación personalizada

Crear un sistema de paginación personalizado para sus aplicaciones móviles React Native puede ofrecer algunas ventajas:

• Puede mejorar la escalabilidad de su aplicación, lo que le permite manejar grandes cantidades de datos de manera más eficiente. Esto es especialmente importante para las aplicaciones que manejan grandes conjuntos de datos.
• La paginación personalizada puede mejorar el rendimiento de su aplicación al dividir los datos en partes más pequeñas y manejables. Esto reducirá el tiempo de carga.
• Con la paginación personalizada, tendrá mayor flexibilidad y control para presentar y acceder a los datos dentro de su aplicación.

Implementación de carga dinámica con paginación personalizada

Cuando su aplicación React Native solo carga los datos necesarios que necesita cargar en ese momento, se denomina carga dinámica. Para implementar la carga dinámica con paginación personalizada, puede seguir estos pasos generales:

1. Determinar el método de paginación: Decida el método de paginación que funcione mejor para su contenido. Esto podría ser un tradicional basado en páginas sistema de paginación, donde los usuarios hacen clic para cargar la página siguiente, o un scroll infinito system, donde se carga más contenido a medida que el usuario se desplaza hacia abajo en la página.
2. Escribir código del lado del servidor y del lado del cliente: escribirá código del lado del servidor para manejar las solicitudes de paginación para páginas específicas de datos y devolverá solo los datos de esa página. Luego, escribirá el código del lado del cliente para escuchar las acciones del usuario que desencadenan solicitudes de más datos, como hacer clic en un Carga más o desplazándose hasta la parte inferior de la página.
3. Implementar la carga de datos: cuando el usuario activa una solicitud de más datos, la aplicación debe enviar una solicitud al lado del servidor para la siguiente página de datos. El lado del servidor debe devolver solo los datos de esa página, que la aplicación puede usar para actualizar la página.
4. Actualizar la página: Finalmente, actualizará la página con los datos recién cargados. Esto podría implicar agregar los nuevos datos a una lista existente de elementos o reemplazar la lista completa con los nuevos datos.

Configuración de la fuente de datos

El primer paso para implementar la paginación personalizada en React Native es configurar su fuente de datos. Esto generalmente implica obtener datos de una API o base de datos y almacenarlos en una variable de estado. Considerar una API REST simple que devuelve una lista de libros.

Este es un ejemplo de cómo se vería la respuesta de la API:

{
"datos": [
 {
"identificación": 1,
"título": "El Guardian en el centeno",
"autor": "JD Salinger"
 },
 {
"identificación": 2,
"título": "Matar a un ruiseñor",
"autor": "Harper Lee"
 },
// ...
 ],
"página": 1,
"paginas totales": 5
}

Para obtener estos datos en nuestra aplicación React Native, podemos usar el buscar función que devuelve un Promesa que se resuelve con la respuesta de la API REST.

Creación de una función de paginación personalizada

Procedamos a crear una función que obtenga los datos de la API y actualice el estado con los datos recién recibidos. Esta función decidirá qué renderizar en la pantalla de la aplicación React Native.

Bien definir esta función como una función asíncrona que toma un parámetro de página y devuelve una Promesa que se resuelve con los datos obtenidos.

constante PÁGINA_TAMAÑO = 10;
constante buscarlibros = asíncrono (página) => {
intentar {
constante respuesta = esperar buscar(` https://myapi.com/books? pagina=${página}&pageSize=${PAGE_SIZE}`);
constante json = esperar respuesta.json();
devolver json.datos;
 } atrapar (error) {
consola.error (error);
devolver [];
 }
}

En el bloque de código anterior, el buscar libros función toma un página parámetro y devuelve una Promesa que se resuelve con los datos de esa página. Aquí el TAMAÑO DE PÁGINA constante se utiliza para limitar el número de libros obtenidos por página.

Implementación de la carga dinámica con la ayuda de la función de paginación personalizada

Con la función de paginación personalizada definida, ahora puede usarla para implementar la carga dinámica en la aplicación. Para hacer esto, use el FlatList componente, que es un componente de alto rendimiento para representar grandes listas de datos en React Native.

Primero, configure el FlatList componente con algún estado inicial:

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar { FlatList, Ver, Texto } de'reaccionar-nativo';
constante aplicación = () => {
constante [libros, setBooks] = useState([]);
constante [páginaActual, establecerPáginaActual] = usarEstado(1);
 usarEfecto(() => {
// Obtener la página inicial de datos
 fetchBooks (página actual).then(datos => setBooks (datos));
 }, []);
constante renderItem = ({ artículo }) => {
devolver (

tamaño de fuente: 18 }}>{elemento.título}</Text>
tamaño de fuente: 14 }}>{elemento.autor}</Text>
 </View>
 );
 };
devolver (
 datos={libros}
 renderItem={renderItem}
 keyExtractor={elemento => elemento.id.toString()}
 />
 );
}
exportarpor defecto aplicación;

Este código configura el componente FlatList con dos elementos de estado, a saber libros y página actual. usamos el usarEfecto() gancho para obtener la página inicial de datos cuando nuestra aplicación se ejecuta por primera vez.

A continuación, definimos un renderItem función que toma un elemento de la libros matriz y devuelve un Vista que contiene el título del libro y el autor.

Finalmente, hemos pasado el libros matriz a la datos apoyo de la FlatList, junto con nuestro renderItem función y extractor de llaves.

Ahora tenemos que asegurarnos de que nuestra Flatlist pueda detectar cuando un usuario se desplaza hasta el final de la lista. En ese punto, debería proceder a buscar y cargar los nuevos datos y renderizarlos.

Para hacer esto, usaremos el al Final Alcanzado apoyo proporcionado a la FlatList, que es una devolución de llamada llamada cuando el usuario se desplaza hasta el final de la lista. También deberíamos actualizar nuestra página actual estado para realizar un seguimiento de la página en la que estamos actualmente.

Aquí está el código actualizado que implementa todo esto:

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar { FlatList, Ver, Texto } de'reaccionar-nativo';
constante aplicación = () => {
constante [libros, setBooks] = useState([]);
constante [páginaActual, establecerPáginaActual] = usarEstado(1);
constante [estáCargando, estableceEstáCargando] = useState(FALSO);
 usarEfecto(() => {
 fetchBooks (página actual).then(datos => setBooks (datos));
 }, []);
constante buscarMás = asíncrono () => {
si (esta cargando) devolver;
 setIsLoading(verdadero);
constante página siguiente = página actual + 1;
constante nuevosdatos = esperar buscar libros (página siguiente);
 setPáginaActual (PáginaSiguiente);
 setIsLoading(FALSO);
 conjunto de libros(anteriorDatos => [...datosprevios, ...datosnuevos]);
 };
constante renderItem = ({ artículo }) => {
devolver (
relleno: 16 }}>
tamaño de fuente: 18 }}>{elemento.título}</Text>
tamaño de fuente: 14 }}>{elemento.autor}</Text>
 </View>
 );
 };
devolver (
 datos={libros}
 renderItem={renderItem}
 keyExtractor={elemento => elemento.id.toString()}
 onEndReached={buscarMás}
 onEndReachedThreshold={0.1}
 />
 );
}
exportarpor defecto aplicación;

Aquí hemos añadido dos nuevos estados llamados esta cargando y onEndReachedThreshold. esta cargando realiza un seguimiento de si actualmente estamos obteniendo datos, y onEndReachedThreshold dispara el al Final Alcanzado devolución de llamada cuando el usuario se ha desplazado hasta el 10 % del final de la lista.

Creamos una nueva función llamada buscarMás que corre cuando al Final Alcanzado Está despedido. Comprueba si ya estamos cargando datos y, si no, busca la siguiente página de datos y actualiza nuestra lista.

Finalmente, agregamos los nuevos accesorios necesarios a nuestro FlatList componente. El FlatList El componente ahora cargará dinámicamente los datos a medida que el usuario se desplaza hasta el final de la lista.

Mejore el rendimiento de su aplicación mediante la paginación personalizada

Aprendió a cargar datos dinámicamente en React Native con su propio sistema de paginación personalizado. Este método le brinda más flexibilidad y control cuando maneja grandes cantidades de datos en su aplicación. Recuerde adaptar su paginación para que coincida con el estilo y las necesidades de su aplicación. Puede personalizarlo aún más para lograr el aspecto y la funcionalidad deseados. En general, definitivamente lo ayudaría a optimizar el rendimiento de su aplicación.