Come caricare i dati in modo dinamico con l'impaginazione personalizzata in React Native

Jan 24, 2024

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

La paginazione 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 un'esperienza utente migliore. Scopri come creare una soluzione di impaginazione personalizzata in React Native che ti consenta di caricare i dati in modo dinamico.

​​​​​​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 unica per la navigazione tra le pagine, l'implementazione di algoritmi per il recupero dei dati da un database o un'API o l'incorporazione di funzionalità come lo scorrimento infinito o il caricamento lento.

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

Quando l'applicazione React Native carica solo i dati necessari che deve caricare in quel momento, viene definita caricamento dinamico. Per implementare il caricamento dinamico con l'impaginazione personalizzata, puoi seguire questi passaggi generali:

Il primo passo nell'implementazione dell'impaginazione personalizzata in React Native è impostare l'origine dati. Ciò in genere comporta il recupero di dati da un'API o un database e la loro archiviazione in una variabile di stato. Considera una semplice API REST che restituisce un elenco di libri.

Ecco un esempio di come potrebbe apparire la risposta API:

Per recuperare questi dati nella nostra app React Native, possiamo utilizzare il fileandare a prenderefunzione, che restituisce aPromettereche si risolve con la risposta dell'API REST.

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

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

Nel blocco di codice sopra, il filefetchBooksla funzione richiede apagina parametro e restituisce una Promise che si risolve con i dati di quella pagina. Ecco, ilDIMENSIONI DELLA PAGINAla costante viene utilizzata per limitare il numero di libri recuperati per pagina.

Una volta definita la funzione di impaginazione personalizzata, ora puoi utilizzarla per implementare il caricamento dinamico nell'app. Per fare ciò, utilizzare ilFlatListcomponente, che è un componente ad alte prestazioni per il rendering di elenchi di dati di grandi dimensioni in React Native.

Per prima cosa, imposta il fileFlatListcomponente con uno stato iniziale:

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

Successivamente, definiamo arenderItemfunzione che prende un elemento dalibriarray e restituisce aVisualizzazionecontenente il titolo del libro e l'autore.

Infine, abbiamo superato illibrimatrice aldatisostegno delFlatList, insieme al nsrenderItemfunzione ekeyExtractor.

Ora dobbiamo assicurarci che la nostra Flatlist possa rilevare quando un utente scorre fino alla fine dell'elenco. A quel punto, dovrebbe procedere a recuperare e caricare i nuovi dati ed eseguirne il rendering.

Per fare ciò, utilizzeremo il fileonEndReachedprop fornito alFlatList , che è una richiamata chiamata quando l'utente scorre fino alla fine dell'elenco. Dovremmo anche aggiornare il nspagina correntestate per tenere traccia della pagina in cui ci troviamo attualmente.

Ecco il codice aggiornato che implementa tutto ciò:

Qui abbiamo aggiunto due nuovi stati chiamatista caricandoEonEndReachedThreshold.sta caricandotiene traccia se stiamo attualmente recuperando dati e