Kako dinamički učitati podatke s prilagođenim označavanjem stranica u React Native

Paginacija se odnosi na sustav dijeljenja velikih količina podataka u manje dijelove ili stranice kojima se lakše upravlja, kako bi se poboljšala izvedba i upotrebljivost. Prilagođeno označavanje stranica, ako se pravilno implementira, može pružiti bolje korisničko iskustvo. Naučite kako stvoriti prilagođeno rješenje za označavanje stranica u React Nativeu koje vam omogućuje dinamičko učitavanje podataka.

Razumijevanje prilagođenog označavanja stranica

S prilagođenim paginiranjem, programeri mogu stvoriti mehanizam paginacije koji odgovara specifičnim zahtjevima njihove aplikacije. Prilagođena paginacija može uključivati ​​dizajniranje jedinstvenog korisničkog sučelja za navigaciju između stranica, implementaciju algoritama za dohvaćanje podataka iz baze podataka ili API-ja, ili uključivanje značajki poput beskonačnog pomicanja ili odgođenog učitavanja.

Prednosti prilagođene paginacije

Stvaranje prilagođenog sustava paginacije za vaše React Native mobilne aplikacije može ponuditi neke prednosti:

• Može poboljšati skalabilnost vaše aplikacije, omogućujući joj da učinkovitije rukuje većim količinama podataka. Ovo je osobito važno za aplikacije koje rade s velikim skupovima podataka.
• Prilagođeno označavanje stranica može poboljšati izvedbu vaše aplikacije dijeljenjem podataka u manje dijelove kojima se lakše upravlja. To će smanjiti vrijeme učitavanja.
• S prilagođenim označavanjem stranica imat ćete veću fleksibilnost i kontrolu u predstavljanju i pristupu podacima unutar svoje aplikacije.

Implementacija dinamičkog učitavanja s prilagođenim označavanjem stranica

Kada vaša React Native aplikacija učitava samo potrebne podatke koje treba učitati u tom trenutku, tada se to naziva dinamičkim učitavanjem. Za implementaciju dinamičkog učitavanja s prilagođenim označavanjem stranica, možete slijediti ove općenite korake:

1. Odredite način paginacije: Odlučite se za način označavanja stranica koji najbolje odgovara vašem sadržaju. Ovo bi moglo biti tradicionalno na temelju stranica sustav paginacije, gdje korisnici kliknu za učitavanje sljedeće stranice ili an beskonačni svitak sustav, gdje se više sadržaja učitava dok se korisnik pomiče niz stranicu.
2. Napišite kod na strani poslužitelja i na strani klijenta: Napisat ćete kod na strani poslužitelja za obradu zahtjeva za paginaciju za određene stranice podataka i vratiti samo podatke za tu stranicu. Zatim ćete napisati kôd na strani klijenta za slušanje korisničkih radnji koje pokreću zahtjeve za dodatnim podacima, poput klikanja a Učitaj više gumb ili pomicanjem do dna stranice.
3. Provedite učitavanje podataka: Kada korisnik pokrene zahtjev za više podataka, aplikacija bi trebala poslati zahtjev strani poslužitelja za sljedeću stranicu podataka. Poslužiteljska strana tada bi trebala vratiti samo podatke za tu stranicu, koje aplikacija može koristiti za ažuriranje stranice.
4. Ažurirajte stranicu: Na kraju ćete ažurirati stranicu novoučitanim podacima. To može uključivati ​​dodavanje novih podataka postojećem popisu stavki ili zamjenu cijelog popisa novim podacima.

Postavljanje izvora podataka

Prvi korak u implementaciji prilagođene paginacije u React Native je postavljanje vašeg izvora podataka. To obično uključuje dohvaćanje podataka iz API-ja ili baze podataka i njihovo pohranjivanje u varijablu stanja. Smatrati jednostavan REST API koji vraća popis knjiga.

Evo primjera kako API odgovor može izgledati:

{
"podaci": [
 {
"iskaznica": 1,
"titula": "Lovac u žitu",
"Autor": "J. D. Salinger"
 },
 {
"iskaznica": 2,
"titula": "Ubiti pticu rugalicu",
"Autor": "Harper Lee"
 },
// ...
 ],
"stranica": 1,
"ukupno stranica": 5
}

Za dohvaćanje ovih podataka u našoj aplikaciji React Native, možemo koristiti dohvatiti funkcija koja vraća a Obećanje koji se rješava odgovorom REST API-ja.

Stvaranje prilagođene funkcije označavanja stranica

Nastavimo stvarati funkciju koja će dohvatiti podatke iz API-ja i ažurirati stanje s novoprimljenim podacima. Ova funkcija će odlučiti što renderirati na zaslonu aplikacije React Native.

Dobro definirajte ovu funkciju kao asinkronu funkciju koji uzima parametar stranice i vraća Promise koji se rješava s dohvaćenim podacima.

konst PAGE_SIZE = 10;
konst dohvati knjige = asinkroni (stranica) => {
probati {
konst odgovor = čekati dohvati (` https://myapi.com/books? stranica=${stranica}&veličina stranice=${PAGE_SIZE}`);
konst json = čekati odgovor.json();
povratak json.podaci;
 } ulov (pogreška) {
konzola.greška (greška);
povratak [];
 }
}

U gornjem bloku koda, dohvatiKnjige funkcija zauzima a stranica parametar i vraća Promise koji se rješava s podacima s te stranice. Evo, PAGE_SIZE konstanta se koristi za ograničavanje broja dohvaćenih knjiga po stranici.

Implementacija dinamičkog učitavanja uz pomoć prilagođene funkcije označavanja stranica

S definiranom prilagođenom funkcijom označavanja stranica, sada je možete koristiti za implementaciju dinamičkog učitavanja u aplikaciji. Da biste to učinili, upotrijebite FlatList komponenta, koja je komponenta visokih performansi za renderiranje velikih popisa podataka u React Native.

Prvo postavite FlatList komponenta s nekim početnim stanjem:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz { FlatList, View, Text } iz'react-native';
konst Aplikacija = () => {
konst [knjige, setKnjige] = useState([]);
konst [trenutnaStranica, postaviTrenutnaStranica] = useState(1);
 useEffect(() => {
// Dohvati početnu stranicu podataka
 fetchBooks (currentPage).then(podaci => setKnjige (podaci));
 }, []);
konst renderItem = ({ stavka }) => {
povratak (

veličina fonta: 18 }}>{item.title}</Text>
veličina fonta: 14 }}>{item.author}</Text>
 </View>
 );
 };
povratak (
 podaci={knjige}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
izvozzadano aplikacija;

Ovaj kod postavlja komponentu FlatList s dva dijela stanja, naime knjige i Trenutna stranica. Koristimo se useEffect() kuka za dohvaćanje početne stranice podataka kada se naša aplikacija prvi put pokrene.

Zatim definiramo a renderItem funkcija koja uzima stavku iz knjige niz i vraća a Pogled koji sadrži naslov knjige i autora.

Napokon smo prošli knjige niz na podaci oslonac od FlatList, zajedno s našim renderItem funkcija i keyExtractor.

Sada moramo biti sigurni da naš Flatlist može otkriti kada se korisnik pomakne do kraja popisa. U tom trenutku trebao bi nastaviti s dohvaćanjem i učitavanjem novih podataka te ih prikazati.

Da bismo to učinili, upotrijebit ćemo onEndReached podupirač koji se pruža FlatList, što je povratni poziv koji se poziva kada se korisnik pomakne do kraja popisa. Također bismo trebali ažurirati naše Trenutna stranica stanje kako bismo pratili na kojoj se stranici trenutno nalazimo.

Evo ažuriranog koda koji implementira sve ovo:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz { FlatList, View, Text } iz'react-native';
konst Aplikacija = () => {
konst [knjige, setKnjige] = useState([]);
konst [trenutnaStranica, postaviTrenutnaStranica] = useState(1);
konst [isLoading, setIsLoading] = useState(lažno);
 useEffect(() => {
 fetchBooks (currentPage).then(podaci => setKnjige (podaci));
 }, []);
konst dohvatiViše = asinkroni () => {
ako (učitava se) povratak;
 setIsLoading(pravi);
konst sljedeća stranica = trenutna stranica + 1;
konst novi podaci = čekati dohvati knjige (sljedeća stranica);
 setCurrentPage (sljedećastranica);
 setIsLoading(lažno);
 setKnjige(prevData => [...prethodniPodaci, ...noviPodaci]);
 };
konst renderItem = ({ stavka }) => {
povratak (
podstava: 16 }}>
veličina fonta: 18 }}>{item.title}</Text>
veličina fonta: 14 }}>{item.author}</Text>
 </View>
 );
 };
povratak (
 podaci={knjige}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
izvozzadano aplikacija;

Ovdje smo dodali dva nova stanja tzv isLoading i onEndReachedThreshold. isLoading prati dohvaćamo li trenutno podatke i onEndReachedThreshold otpušta onEndReached povratni poziv kada se korisnik pomakne unutar 10% od kraja popisa.

Napravili smo novu funkciju tzv dohvatiViše koji se pokreće kada onEndReached je otpušten. Provjerava učitavamo li već podatke, a ako ne, dohvaća sljedeću stranicu podataka i ažurira naš popis.

Konačno, dodali smo nove potrebne rekvizite našim FlatList komponenta. The FlatList komponenta će sada dinamički učitavati podatke dok se korisnik pomiče do kraja popisa.

Poboljšajte izvedbu svoje aplikacije pomoću prilagođenog označavanja stranica

Naučili ste kako dinamički učitati podatke u React Native s vlastitim prilagođenim sustavom paginacije. Ova vam metoda daje veću fleksibilnost i kontrolu pri radu s velikim količinama podataka u vašoj aplikaciji. Ne zaboravite prilagoditi svoju paginaciju tako da odgovara stilu i potrebama vaše aplikacije. Možete ga dodatno prilagoditi kako biste postigli željeni izgled i funkcionalnost. Sve u svemu, definitivno bi vam pomoglo da optimizirate izvedbu svoje aplikacije.