L'impaginazione personalizzata con caricamento dinamico dei dati può migliorare le prestazioni e l'esperienza utente complessiva della tua app.

L'impaginazione si riferisce al sistema di divisione di grandi quantità di dati in blocchi o pagine più piccoli e più gestibili per migliorare le prestazioni e l'usabilità. L'impaginazione personalizzata, se implementata correttamente, può fornire una migliore esperienza utente. Scopri come creare una soluzione di impaginazione personalizzata in React Native che ti consenta di caricare i dati in modo dinamico.

Comprensione dell'impaginazione personalizzata

Con l'impaginazione personalizzata, gli sviluppatori possono creare un meccanismo di impaginazione adatto ai requisiti specifici della loro applicazione. L'impaginazione personalizzata può comportare la progettazione di un'interfaccia utente univoca per la navigazione tra le pagine, l'implementazione di algoritmi per recuperare i dati da un database o un'APIo incorporando funzionalità come lo scorrimento infinito o il caricamento lento.

instagram viewer

Vantaggi dell'impaginazione personalizzata

La creazione di un sistema di impaginazione personalizzato per le tue app mobili React Native può offrire alcuni vantaggi:

  • Può migliorare la scalabilità della tua app, consentendole di gestire maggiori quantità di dati in modo più efficiente. Ciò è particolarmente importante per le app che gestiscono set di dati di grandi dimensioni.
  • L'impaginazione personalizzata può migliorare le prestazioni della tua app dividendo i dati in blocchi più piccoli e più gestibili. Ciò ridurrà il tempo di caricamento.
  • Con l'impaginazione personalizzata, avrai maggiore flessibilità e controllo nella presentazione e nell'accesso ai dati all'interno della tua app.

Implementazione del caricamento dinamico con impaginazione personalizzata

Quando la tua applicazione React Native carica solo i dati necessari che deve caricare in quel momento, allora si parla di caricamento dinamico. Per implementare il caricamento dinamico con impaginazione personalizzata, puoi seguire questi passaggi generali:

  1. Determina il metodo di impaginazione: scegli un metodo di impaginazione che funzioni meglio per i tuoi contenuti. Questo potrebbe essere un tradizionale basato sulla pagina sistema di impaginazione, in cui gli utenti fanno clic per caricare la pagina successiva, o un scroll infinito sistema, in cui viene caricato più contenuto mentre l'utente scorre la pagina.
  2. Scrivi codice lato server e lato client: scriverai il codice lato server per gestire le richieste di impaginazione per pagine specifiche di dati e restituire solo i dati per quella pagina. Scriverai quindi il codice lato client per ascoltare le azioni dell'utente che attivano richieste di più dati, come fare clic su a Carica di più o scorrendo fino in fondo alla pagina.
  3. Implementare il caricamento dei dati: quando l'utente attiva una richiesta di ulteriori dati, l'app deve inviare una richiesta al lato server per la pagina di dati successiva. Il lato server dovrebbe quindi restituire solo i dati per quella pagina, che l'app può utilizzare per aggiornare la pagina.
  4. Aggiorna la pagina: Infine, aggiornerai la pagina con i dati appena caricati. Ciò potrebbe comportare l'aggiunta dei nuovi dati a un elenco di elementi esistente o la sostituzione dell'intero elenco con i nuovi dati.

Impostazione dell'origine dati

Il primo passo per implementare l'impaginazione personalizzata in React Native è configurare l'origine dati. Ciò comporta in genere il recupero dei dati da un'API o un database e la memorizzazione in una variabile di stato. Prendere in considerazione una semplice API REST che restituisce un elenco di libri.

Ecco un esempio di come potrebbe apparire la risposta dell'API:

{
"dati": [
 {
"id": 1,
"titolo": "Il cacciatore nella segale",
"autore": "JD Salinger"
 },
 {
"id": 2,
"titolo": "Per uccidere un Mockingbird",
"autore": "Harper Lee"
 },
// ...
 ],
"pagina": 1,
"totalePagine": 5
}

Per recuperare questi dati nella nostra app React Native, possiamo usare il file andare a prendere funzione, che restituisce a Promettere che si risolve con la risposta dell'API REST.

Creazione di una funzione di impaginazione personalizzata

Procediamo a creare una funzione che preleverà i dati dall'API e aggiornerà lo stato con i dati appena ricevuti. Questa funzione deciderà cosa rendere sullo schermo dell'app React Native.

BENE definire questa funzione come una funzione asincrona che accetta un parametro di pagina e restituisce una promessa che si risolve con i dati recuperati.

cost PAGE_SIZE = 10;
cost fetchLibri = asincrono (pagina) => {
Tentativo {
cost risposta = aspetta andare a prendere(` https://myapi.com/books? pagina=${pagina}&dimensionepagina=${PAGE_SIZE}`);
cost json = aspetta risposta.json();
ritorno json.dati;
 } presa (errore) {
consolare.errore (errore);
ritorno [];
 }
}

Nel blocco di codice sopra, il fetchLibri la funzione richiede a pagina parametro e restituisce una promessa che si risolve con i dati di quella pagina. Ecco, il DIMENSIONI DELLA PAGINA constant viene utilizzato per limitare il numero di libri recuperati per pagina.

Implementazione del caricamento dinamico con l'aiuto della funzione di impaginazione personalizzata

Con la funzione di impaginazione personalizzata definita, ora puoi usarla per implementare il caricamento dinamico nell'app. Per fare questo, usa il Elenco piatto componente, che è un componente ad alte prestazioni per il rendering di grandi elenchi di dati in React Native.

Per prima cosa, imposta il Elenco piatto componente con uno stato iniziale:

importare Reagire, {useState, useEffect} da'reagire';
importare {Elenco piatto, Visualizza, Testo} da'nativo di reazione';
cost Applicazione = () => {
cost [libri, setLibri] = useState([]);
cost [currentPage, setCurrentPage] = useState(1);


 usaEffetto(() => {
// Recupera la pagina iniziale dei dati
 fetchBooks (currentPage).then(dati => setBooks (dati));
 }, []);


cost renderItem = ({ articolo }) => {
ritorno (

dimensione del font: 18 }}>{item.title}</Text>
dimensione del font: 14 }}>{item.author}</Text>
 </View>
 );
 };


ritorno (
 data={libri}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
esportarepredefinito Applicazione;

Questo codice imposta il componente FlatList con due parti di stato, vale a dire libri E pagina corrente. Noi usiamo il usaEffetto() hook per recuperare la pagina iniziale dei dati quando la nostra app viene eseguita per la prima volta.

Successivamente, definiamo a renderItem funzione che prende un elemento da libri matrice e restituisce a Visualizzazione contenente il titolo del libro e l'autore.

Infine, abbiamo superato il libri matrice al dati puntello del Elenco piatto, insieme al nostro renderItem funzione e keyExtractor.

Ora dobbiamo assicurarci che il nostro Flatlist possa rilevare quando un utente scorre fino alla fine dell'elenco. A quel punto, dovrebbe procedere al recupero e al caricamento dei nuovi dati e al rendering.

Per fare questo, useremo il onEndReached prop fornito al Elenco piatto, ovvero un callback chiamato quando l'utente scorre fino alla fine dell'elenco. Dovremmo anche aggiornare il nostro pagina corrente state per tenere traccia della pagina in cui ci troviamo attualmente.

Ecco il codice aggiornato che implementa tutto questo:

importare Reagire, {useState, useEffect} da'reagire';
importare {Elenco piatto, Visualizza, Testo} da'nativo di reazione';
cost Applicazione = () => {
cost [libri, setLibri] = useState([]);
cost [currentPage, setCurrentPage] = useState(1);
cost [isLoading, setIsLoading] = useState(falso);


 usaEffetto(() => {
 fetchBooks (currentPage).then(dati => setBooks (dati));
 }, []);


cost fetchAltro = asincrono () => {
Se (è in caricamento) ritorno;


 setIsLoading(VERO);


cost nextPage = currentPage + 1;
cost nuoviDati = aspetta fetchBooks (pagina successiva);


 setCurrentPage (pagina successiva);
 setIsLoading(falso);
 setLibri(prevData => [...prevData, ...newData]);
 };


cost renderItem = ({ articolo }) => {
ritorno (
imbottitura: 16 }}>
dimensione del font: 18 }}>{item.title}</Text>
dimensione del font: 14 }}>{item.author}</Text>
 </View>
 );
 };


ritorno (
 data={libri}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
esportarepredefinito Applicazione;

Qui abbiamo aggiunto due nuovi stati chiamati isLoading E onEndReachedThreshold. isLoading tiene traccia del fatto che stiamo attualmente recuperando i dati e onEndReachedThreshold spara il onEndReached richiamata quando l'utente ha fatto scorrere entro il 10% dalla fine dell'elenco.

Abbiamo creato una nuova funzione chiamata fetchMore che corre quando onEndReached viene licenziato. Controlla se stiamo già caricando i dati e, in caso contrario, recupera la pagina successiva di dati e aggiorna il nostro elenco.

Infine, abbiamo aggiunto i nuovi oggetti di scena necessari al nostro Elenco piatto componente. IL Elenco piatto il componente ora caricherà dinamicamente i dati mentre l'utente scorre fino alla fine dell'elenco.

Migliora le prestazioni della tua app utilizzando l'impaginazione personalizzata

Hai imparato a caricare i dati in modo dinamico in React Native con il tuo sistema di impaginazione personalizzato. Questo metodo ti offre maggiore flessibilità e controllo quando gestisci grandi quantità di dati nella tua app. Ricordati di adattare l'impaginazione in modo che corrisponda allo stile e alle esigenze della tua app. Puoi personalizzarlo ulteriormente per ottenere l'aspetto e la funzionalità desiderati. Nel complesso, ti aiuterebbe sicuramente a ottimizzare le prestazioni della tua app.