Paginacija po meri z dinamičnim nalaganjem podatkov lahko izboljša učinkovitost in splošno uporabniško izkušnjo vaše aplikacije.

Paginacija se nanaša na sistem delitve velikih količin podatkov na manjše, bolj obvladljive dele ali strani za izboljšanje zmogljivosti in uporabnosti. Paginacija po meri, če je pravilno implementirana, lahko zagotovi boljšo uporabniško izkušnjo. Naučite se ustvariti rešitev za paginacijo po meri v React Native, ki vam omogoča dinamično nalaganje podatkov.

Razumevanje strani po meri

S paginacijo po meri lahko razvijalci ustvarijo mehanizem za paginacijo, ki ustreza posebnim zahtevam njihove aplikacije. Paginacija po meri lahko vključuje oblikovanje edinstvenega uporabniškega vmesnika za krmarjenje med stranmi, izvajanje algoritmov za pridobivanje podatkov iz baze podatkov ali API-jaali vključuje funkcije, kot je neskončno drsenje ali leno nalaganje.

Prednosti strani po meri

Ustvarjanje sistema označevanja strani po meri za vaše mobilne aplikacije React Native lahko ponudi nekaj prednosti:

instagram viewer
  • Izboljša lahko razširljivost vaše aplikacije in ji omogoči učinkovitejšo obdelavo večjih količin podatkov. To je še posebej pomembno za aplikacije, ki se ukvarjajo z velikimi nabori podatkov.
  • Paginacija po meri lahko izboljša učinkovitost vaše aplikacije z razdelitvijo podatkov na manjše in bolj obvladljive dele. To bo skrajšalo čas nalaganja.
  • Z ostranjevanjem po meri boste imeli večjo prilagodljivost in nadzor pri predstavitvi in ​​dostopu do podatkov v vaši aplikaciji.

Implementacija dinamičnega nalaganja s strani po meri

Ko vaša aplikacija React Native naloži samo potrebne podatke, ki jih mora naložiti v tistem trenutku, se to imenuje dinamično nalaganje. Če želite implementirati dinamično nalaganje s strani po meri, lahko sledite tem splošnim korakom:

  1. Določite način paginacije: Odločite se za način označevanja strani, ki najbolj ustreza vaši vsebini. To bi lahko bilo tradicionalno na podlagi strani sistem paginacije, kjer uporabniki kliknejo, da naložijo naslednjo stran, ali an neskončno drsenje sistem, kjer se naloži več vsebine, ko se uporabnik pomakne navzdol po strani.
  2. Napišite kodo na strani strežnika in odjemalca: Napisali boste kodo na strani strežnika za obdelavo zahtev za paginacijo za določene strani s podatki in vrnili samo podatke za to stran. Nato boste napisali kodo na strani odjemalca za poslušanje uporabniških dejanj, ki sprožijo zahteve za več podatkov, na primer klik a Naloži več ali se pomaknite na dno strani.
  3. Izvedite nalaganje podatkov: Ko uporabnik sproži zahtevo za več podatkov, mora aplikacija strežniški strani poslati zahtevo za naslednjo stran podatkov. Strežniška stran bi morala nato vrniti samo podatke za to stran, ki jih lahko aplikacija uporabi za posodobitev strani.
  4. Posodobite stran: Na koncu boste posodobili stran z novo naloženimi podatki. To lahko vključuje dodajanje novih podatkov obstoječemu seznamu elementov ali zamenjavo celotnega seznama z novimi podatki.

Nastavitev vira podatkov

Prvi korak pri izvajanju označevanja strani po meri v React Native je nastavitev vira podatkov. To običajno vključuje pridobivanje podatkov iz API-ja ali baze podatkov in njihovo shranjevanje v spremenljivki stanja. Razmislite preprost API REST ki vrne seznam knjig.

Tukaj je primer, kako bi lahko izgledal odgovor API-ja:

{
"podatki": [
 {
"id": 1,
"naslov": "Lovilec v rži",
"avtor": "J. D. Salinger"
 },
 {
"id": 2,
"naslov": "Ubiti posmehljivega ptiča",
"avtor": "Harper Lee"
 },
// ...
 ],
"stran": 1,
"totalPages": 5
}

Za pridobitev teh podatkov v naši aplikaciji React Native lahko uporabimo prinašati funkcija, ki vrne a Obljuba ki se razreši z odgovorom API-ja REST.

Ustvarjanje funkcije označevanja strani po meri

Nadaljujmo z ustvarjanjem funkcije, ki bo pridobila podatke iz API-ja in posodobila stanje z novo prejetimi podatki. Ta funkcija bo odločila, kaj naj upodablja na zaslonu aplikacije React Native.

Bomo definirajte to funkcijo kot asinhrono funkcijo ki sprejme parameter strani in vrne obljubo, ki se razreši s pridobljenimi podatki.

konst PAGE_SIZE = 10;
konst fetchBooks = asinh (stran) => {
poskusi {
konst odgovor = čakati prinesi (` https://myapi.com/books? stran=${stran}&pageSize=${PAGE_SIZE}`);
konst json = čakati odziv.json();
vrnitev json.data;
 } ulov (napaka) {
konzola.error (napaka);
vrnitev [];
 }
}

V zgornjem bloku kode je fetchBooks funkcija traja a strani parameter in vrne obljubo, ki se razreši s podatki s te strani. Tukaj, PAGE_SIZE konstanta se uporablja za omejevanje števila knjig, pridobljenih na stran.

Implementacija dinamičnega nalaganja s pomočjo funkcije strani po meri

Z definirano funkcijo označevanja strani po meri jo lahko zdaj uporabite za izvajanje dinamičnega nalaganja v aplikaciji. Če želite to narediti, uporabite FlatList komponenta, ki je visoko zmogljiva komponenta za upodabljanje velikih seznamov podatkov v React Native.

Najprej nastavite FlatList komponenta z nekim začetnim stanjem:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz { FlatList, View, Text } od'react-native';
konst Aplikacija = () => {
konst [knjige, setKnjige] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);


 useEffect(() => {
// Pridobi začetno stran podatkov
 fetchBooks (currentPage).then(podatke => setBooks (podatki));
 }, []);


konst renderItem = ({ element }) => {
vrnitev (

velikost pisave: 18 }}>{item.title}</Text>
velikost pisave: 14 }}>{item.author}</Text>
 </View>
 );
 };


vrnitev (
 podatki={knjige}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
izvozprivzeto aplikacija;

Ta koda nastavi komponento FlatList z dvema deloma stanja, in sicer knjige in trenutna stran. Uporabljamo useEffect() kavelj za pridobitev začetne strani podatkov, ko se naša aplikacija prvič zažene.

Nato definiramo a renderItem funkcijo, ki vzame predmet iz knjige matriko in vrne a Pogled ki vsebuje naslov knjige in avtorja.

Končno smo opravili knjige niz do podatke rekvizit za FlatList, skupaj z našimi renderItem funkcijo in keyExtractor.

Zdaj se moramo prepričati, da lahko naš Flatlist zazna, ko se uporabnik pomakne na konec seznama. Takrat bi moral nadaljevati s pridobivanjem in nalaganjem novih podatkov ter njihovim upodabljanjem.

Za to bomo uporabili onEndReached rekvizit zagotovljen FlatList, ki je povratni klic, ki se kliče, ko se uporabnik pomakne na konec seznama. Prav tako bi morali posodobiti naše trenutna stran stanje, da bi spremljali, na kateri strani smo trenutno.

Tukaj je posodobljena koda, ki izvaja vse to:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz { FlatList, View, Text } od'react-native';
konst Aplikacija = () => {
konst [knjige, setKnjige] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(lažno);


 useEffect(() => {
 fetchBooks (currentPage).then(podatke => setBooks (podatki));
 }, []);


konst fetchMore = asinh () => {
če (se nalaga) vrnitev;


 setIsLoading(prav);


konst naslednja stran = trenutna stran + 1;
konst noviPodatki = čakati fetchBooks (naslednja stran);


 setCurrentPage (naslednjaStran);
 setIsLoading(lažno);
 setBooks(prevData => [...prejšnjiPodatki, ...noviPodatki]);
 };


konst renderItem = ({ element }) => {
vrnitev (
oblazinjenje: 16 }}>
velikost pisave: 18 }}>{item.title}</Text>
velikost pisave: 14 }}>{item.author}</Text>
 </View>
 );
 };


vrnitev (
 podatki={knjige}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
izvozprivzeto aplikacija;

Tu smo dodali dve novi državi, imenovani isLoading in onEndReachedThreshold. isLoading spremlja, ali trenutno pridobivamo podatke, in onEndReachedThreshold sproži onEndReached povratni klic, ko se uporabnik pomakne do 10 % konca seznama.

Ustvarili smo novo funkcijo, imenovano fetchMore ki teče, ko onEndReached je odpuščen. Preveri, ali že nalagamo podatke, in če ne, pridobi naslednjo stran podatkov in posodobi naš seznam.

Na koncu smo našemu dodali nove potrebne rekvizite FlatList komponento. The FlatList komponenta bo zdaj dinamično nalagala podatke, ko se uporabnik pomakne na konec seznama.

Izboljšajte delovanje svoje aplikacije s strani po meri

Naučili ste se, kako dinamično naložiti podatke v React Native z lastnim sistemom označevanja strani po meri. Ta metoda vam daje večjo prilagodljivost in nadzor pri delu z velikimi količinami podatkov v vaši aplikaciji. Ne pozabite prilagoditi paginacije, da bo ustrezala slogu in potrebam vaše aplikacije. Lahko ga še bolj prilagodite, da dosežete želeni videz in funkcionalnost. Na splošno bi vam zagotovo pomagalo optimizirati delovanje vaše aplikacije.