Cum să încărcați datele în mod dinamic cu paginarea personalizată în React Native

Paginarea se referă la sistemul de împărțire a cantităților mari de date în bucăți sau pagini mai mici, mai ușor de gestionat, pentru a îmbunătăți performanța și gradul de utilizare. Paginarea personalizată, dacă este implementată corect, poate oferi o experiență mai bună pentru utilizator. Aflați cum să creați o soluție de paginare personalizată în React Native care vă permite să încărcați datele în mod dinamic.

Înțelegerea paginii personalizate

Cu paginarea personalizată, dezvoltatorii pot crea un mecanism de paginare care se potrivește cerințelor specifice ale aplicației lor. Paginarea personalizată poate implica proiectarea unei interfețe unice de utilizator pentru navigarea între pagini, implementarea algoritmilor pentru preluarea datelor dintr-o bază de date sau API, sau încorporând funcții precum defilarea infinită sau încărcare leneșă.

Avantajele paginii personalizate

Crearea unui sistem de paginare personalizat pentru aplicațiile mobile React Native poate oferi câteva avantaje:

• Poate îmbunătăți scalabilitatea aplicației dvs., permițându-i să gestioneze mai eficient cantități mai mari de date. Acest lucru este important în special pentru aplicațiile care se ocupă cu seturi de date mari.
• Paginarea personalizată poate îmbunătăți performanța aplicației dvs. prin împărțirea datelor în bucăți mai mici și mai ușor de gestionat. Acest lucru va reduce timpul de încărcare.
• Cu paginarea personalizată, veți avea flexibilitate și control sporit în prezentarea și accesarea datelor din aplicația dvs.

Implementarea încărcării dinamice cu paginare personalizată

Când aplicația dvs. React Native încarcă doar datele necesare pe care trebuie să le încarce în acel moment, atunci se numește încărcare dinamică. Pentru a implementa încărcarea dinamică cu paginare personalizată, puteți urma acești pași generali:

1. Determinați metoda de paginare: decideți asupra unei metode de paginare care funcționează cel mai bine pentru conținutul dvs. Acesta ar putea fi un tradițional bazate pe pagini sistem de paginare, în care utilizatorii dau clic pentru a încărca pagina următoare sau un derulare infinită sistem, unde este încărcat mai mult conținut pe măsură ce utilizatorul derulează în jos pe pagină.
2. Scrieți codul serverului și al clientului: Veți scrie cod pe partea serverului pentru a gestiona cererile de paginare pentru anumite pagini de date și veți returna numai datele pentru pagina respectivă. Veți scrie apoi cod la nivelul clientului pentru a asculta acțiunile utilizatorului care declanșează solicitări pentru mai multe date, cum ar fi făcând clic pe a Incarca mai mult butonul sau derulând în partea de jos a paginii.
3. Implementați încărcarea datelor: Când utilizatorul declanșează o solicitare pentru mai multe date, aplicația ar trebui să trimită o solicitare către partea de server pentru următoarea pagină de date. Partea serverului ar trebui să returneze numai datele pentru pagina respectivă, pe care aplicația le poate folosi pentru a actualiza pagina.
4. Actualizați pagina: În cele din urmă, veți actualiza pagina cu datele nou încărcate. Aceasta ar putea implica adăugarea noilor date la o listă existentă de articole sau înlocuirea întregii liste cu datele noi.

Configurarea sursei de date

Primul pas în implementarea paginii personalizate în React Native este să vă configurați sursa de date. Aceasta implică de obicei preluarea datelor dintr-o API sau bază de date și stocarea lor într-o variabilă de stare. Considera un simplu API REST care returnează o listă de cărți.

Iată un exemplu despre cum ar putea arăta răspunsul API:

{
"date": [
 {
"id": 1,
"titlu": "De veghe în lanul de secară",
"autor": „J.D. Salinger”
 },
 {
"id": 2,
"titlu": "Să ucizi o pasăre cântătoare",
"autor": „Harper Lee”
 },
// ...
 ],
"pagină": 1,
"totalPages": 5
}

Pentru a prelua aceste date în aplicația noastră React Native, putem folosi aduce funcție, care returnează a Promisiune care se rezolvă cu răspunsul din API-ul REST.

Crearea unei funcții de paginare personalizată

Să continuăm să creăm o funcție care va prelua datele din API și va actualiza starea cu datele nou primite. Această funcție va decide ce să redeze pe ecranul aplicației React Native.

Bine definiți această funcție ca o funcție asincronă care ia un parametru de pagină și returnează o Promisiune care se rezolvă cu datele preluate.

const PAGE_SIZE = 10;
const fetchBooks = asincron (pagina) => {
încerca {
const răspuns = așteaptă aduce(` https://myapi.com/books? pagina=${page}&pageSize=${PAGE_SIZE}`);
const json = așteaptă răspuns.json();
întoarcere json.data;
 } captură (eroare) {
consolă.eroare (eroare);
întoarcere [];
 }
}

În blocul de cod de mai sus, fetchBooks funcția ia a pagină parametru și returnează o Promisiune care se rezolvă cu datele din pagina respectivă. Aici MĂRIMEA PAGINII constanta este folosită pentru a limita numărul de cărți preluate pe pagină.

Implementarea încărcării dinamice cu ajutorul funcției de paginare personalizată

Cu funcția de paginare personalizată definită, o puteți utiliza acum pentru a implementa încărcarea dinamică în aplicație. Pentru a face acest lucru, utilizați FlatList componentă, care este o componentă de înaltă performanță pentru redarea unor liste mari de date în React Native.

Mai întâi, configurați FlatList componentă cu o stare inițială:

import Reacționează, { useState, useEffect } din'reacţiona';
import { FlatList, View, Text } din„reacționează-nativ”;
const Aplicație = () => {
const [carti, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Preluați pagina inițială de date
 fetchBooks (currentPage).then(date => setBooks (date));
 }, []);
const renderItem = ({ item }) => {
întoarcere (

marimea fontului: 18 }}>{item.title}</Text>
marimea fontului: 14 }}>{item.author}</Text>
 </View>
 );
 };
întoarcere (
 date={carti}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
exportMod implicit Aplicație;

Acest cod setează componenta FlatList cu două părți de stare, și anume cărți și pagina curenta. Noi folosim useEffect() cârlig pentru a prelua pagina inițială de date atunci când aplicația noastră rulează pentru prima dată.

În continuare, definim a renderItem funcţie care preia un element din cărți matrice și returnează a Vedere conţinând titlul cărţii şi autorul.

În cele din urmă, am trecut de cărți matrice la date prop de la FlatList, împreună cu a noastră renderItem funcţia şi keyExtractor.

Acum trebuie să ne asigurăm că Flatlist poate detecta când un utilizator derulează până la sfârșitul listei. În acel moment, ar trebui să continue să preia și să încarce noile date și să le redeze.

Pentru a face acest lucru, vom folosi onEndReached recuzită furnizată la FlatList, care este un apel invers apelat atunci când utilizatorul derulează până la sfârșitul listei. De asemenea, ar trebui să ne actualizăm pagina curenta state pentru a urmări pagina pe care ne aflăm în prezent.

Iată codul actualizat care implementează toate acestea:

import Reacționează, { useState, useEffect } din'reacţiona';
import { FlatList, View, Text } din„reacționează-nativ”;
const Aplicație = () => {
const [carti, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(fals);
 useEffect(() => {
 fetchBooks (currentPage).then(date => setBooks (date));
 }, []);
const fetchMore = asincron () => {
dacă (se incarca) întoarcere;
 setIsLoading(Adevărat);
const NextPage = currentPage + 1;
const newData = așteaptă fetchBooks (nextPage);
 setCurrentPage (nextPage);
 setIsLoading(fals);
 set de cărți(prevData => [...prevData, ...newData]);
 };
const renderItem = ({ item }) => {
întoarcere (
umplutura: 16 }}>
marimea fontului: 18 }}>{item.title}</Text>
marimea fontului: 14 }}>{item.author}</Text>
 </View>
 );
 };
întoarcere (
 date={carti}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
exportMod implicit Aplicație;

Aici am adăugat două state noi numite se incarca și onEndReached Threshold. se incarca ține evidența dacă în prezent preluăm date și onEndReached Threshold trage pe onEndReached apel invers atunci când utilizatorul a derulat până la 10% de la sfârșitul listei.

Am creat o nouă funcție numită aduceMai mult care rulează când onEndReached este concediat. Verifică dacă încărcăm deja date și, dacă nu, preia următoarea pagină de date și actualizează lista noastră.

În cele din urmă, am adăugat noile elemente de recuzită necesare FlatList componentă. The FlatList componenta va încărca acum datele în mod dinamic pe măsură ce utilizatorul derulează până la sfârșitul listei.

Îmbunătățiți performanța aplicației dvs. folosind paginarea personalizată

Ați învățat cum să încărcați datele în mod dinamic în React Native cu propriul sistem de paginare personalizat. Această metodă vă oferă mai multă flexibilitate și control atunci când aveți de-a face cu cantități mari de date din aplicația dvs. Nu uitați să vă adaptați paginarea pentru a se potrivi cu stilul și nevoile aplicației. Îl puteți personaliza și mai mult pentru a obține aspectul și funcționalitatea dorite. În general, vă va ajuta cu siguranță să optimizați performanța aplicației.