Andmete dünaamiline laadimine React Native'i kohandatud lehekülgedega

Lehtede lehitsemine viitab suure andmehulga jagamisele väiksemateks, paremini hallatavateks tükkideks või lehtedeks, et parandada jõudlust ja kasutatavust. Õigesti rakendatud kohandatud lehekülgede otsimine võib pakkuda paremat kasutuskogemust. Siit saate teada, kuidas luua rakenduses React Native kohandatud lehekülgede otsimise lahendus, mis võimaldab teil andmeid dünaamiliselt laadida.

Kohandatud lehekülgede lugemine

Kohandatud lehekülgede muutmise abil saavad arendajad luua lehekülgede muutmise mehhanismi, mis sobib nende rakenduse erinõuetega. Kohandatud lehekülgede otsimine võib hõlmata ainulaadse kasutajaliidese kujundamist lehtede vahel navigeerimiseks ja algoritmide rakendamist andmete toomine andmebaasist või API-stvõi sisaldab selliseid funktsioone nagu lõpmatu kerimine või laisk laadimine.

Kohandatud lehekülgede eelised

React Native mobiilirakenduste jaoks kohandatud lehekülgede otsimise süsteemi loomine võib pakkuda mõningaid eeliseid.

• See võib parandada teie rakenduse mastaapsust, võimaldades sellel tõhusamalt hallata suuremaid andmemahte. See on eriti oluline rakenduste puhul, mis tegelevad suurte andmekogumitega.
• Kohandatud lehekülgede otsimine võib teie rakenduse toimivust parandada, jagades andmed väiksemateks ja paremini hallatavateks tükkideks. See vähendab laadimisaega.
• Kohandatud lehekülgede muutmine suurendab paindlikkust ja kontrolli oma rakenduses andmete esitamisel ja neile juurde pääsemisel.

Dünaamilise laadimise rakendamine kohandatud lehekülgedega

Kui teie rakendus React Native laadib ainult vajalikud andmed, mida ta sel ajal vajab, nimetatakse seda dünaamiliseks laadimiseks. Dünaamilise laadimise rakendamiseks kohandatud lehekülgede muutmisega saate järgida neid üldisi samme.

1. Määrake lehekülgede muutmise meetod: Otsustage oma sisu jaoks kõige sobivam lehekülgede muutmise meetod. See võib olla traditsiooniline lehepõhine lehekülgede otsimise süsteem, kus kasutajad klõpsavad järgmise lehe laadimiseks või an lõpmatu kerimine süsteem, kus kasutaja lehel allapoole kerimisel laaditakse rohkem sisu.
2. Kirjutage serveri- ja kliendipoolne kood: kirjutate serveripoolse koodi, et käsitleda konkreetsete andmelehtede lehekülgede otsimise taotlusi ja tagastada ainult selle lehe andmed. Seejärel kirjutate kliendipoolse koodi, et kuulata kasutaja toiminguid, mis käivitavad lisaandmete päringuid, näiteks klõpsamist a Lae rohkem nuppu või kerides lehe allossa.
3. Rakendage andmete laadimine: kui kasutaja käivitab rohkemate andmete päringu, peaks rakendus saatma serveri poolele päringu järgmise andmelehe saamiseks. Serveripool peaks seejärel tagastama ainult selle lehe andmed, mida rakendus saab lehe värskendamiseks kasutada.
4. Uuenda lehte: Lõpuks värskendate lehte äsja laaditud andmetega. See võib hõlmata uute andmete lisamist olemasolevasse üksuste loendisse või kogu loendi asendamist uute andmetega.

Andmeallika seadistamine

Esimene samm kohandatud lehekülgede muutmise rakendamisel React Native'is on andmeallika seadistamine. Tavaliselt hõlmab see andmete toomist API-st või andmebaasist ja nende salvestamist olekumuutujas. Kaaluge lihtne REST API mis tagastab raamatute loendi.

Siin on näide sellest, kuidas API vastus välja näha võib:

{
"andmed": [
 {
"id": 1,
"tiitel": "Kuristik rukkis",
"autor": "J.D. Salinger"
 },
 {
"id": 2,
"tiitel": "Tappa laulurästast",
"autor": "Harper Lee"
 },
// ...
 ],
"leht": 1,
"lehti kokku": 5
}

Nende andmete toomiseks meie rakendusest React Native saame kasutada tooma funktsioon, mis tagastab a Lubadus mis laheneb REST API vastusega.

Kohandatud lehekülgede funktsiooni loomine

Jätkame funktsiooni loomisega, mis hangib andmed API-st ja värskendab olekut äsja saadud andmetega. See funktsioon otsustab, mida rakenduse React Native ekraanil renderdada.

Me teeme defineerige see funktsioon asünkroonse funktsioonina mis võtab lehe parameetri ja tagastab lubaduse, mis lahendab koos toodud andmetega.

konst PAGE_SIZE = 10;
konst tõmbaraamatud = asünkr (lehekülg) => {
proovi {
konst vastus = ootama tõmba(` https://myapi.com/books? leht=${page}&pageSize=${PAGE_SIZE}`);
konst json = ootama vastus.json();
tagasi json.data;
 } püüda (viga) {
konsool.error (viga);
tagasi [];
 }
}

Ülaltoodud koodiplokis on tõmbaraamatud funktsioon võtab a lehel parameeter ja tagastab lubaduse, mis lahendatakse selle lehe andmetega. Siin, PAGE_SIZE konstanti kasutatakse ühele lehele toodavate raamatute arvu piiramiseks.

Dünaamilise laadimise rakendamine kohandatud lehekülgede muutmise funktsiooni abil

Kui kohandatud lehekülgede muutmise funktsioon on määratletud, saate seda nüüd kasutada rakenduses dünaamilise laadimise rakendamiseks. Selleks kasutage FlatList komponent, mis on suure jõudlusega komponent suurte andmeloendite renderdamiseks rakenduses React Native.

Esiteks seadistage FlatList mingi algolekuga komponent:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { FlatList, View, Text } alates'react-native';
konst Rakendus = () => {
konst [raamatud, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Andmete alglehe toomine
 tõmbaraamatud (praegune leht).then(andmeid => setBooks (andmed));
 }, []);
konst renderItem = ({ item }) => {
tagasi (

fondi suurus: 18 }}>{item.title}</Text>
fondi suurus: 14 }}>{item.author}</Text>
 </View>
 );
 };
tagasi (
 data={raamatud}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
eksportidavaikimisi Rakendus;

See kood seadistab FlatListi komponendi kahe olekuga, nimelt raamatuid ja Käesolev lehekülg. Me kasutame useEffect() konks, et tuua meie rakenduse esmakordsel käivitamisel andmete esialgne leht.

Järgmisena määratleme a renderda üksus funktsioon, mis võtab üksuse raamatuid massiiv ja tagastab a Vaade sisaldab raamatu pealkirja ja autorit.

Lõpuks oleme läbinud raamatuid massiivi juurde andmeid prop of the FlatList, koos meiega renderda üksus funktsioon ja KeyExtractor.

Nüüd peame tagama, et meie Flatlist suudab tuvastada, kui kasutaja loendi lõppu kerib. Sel hetkel peaks ta alustama uute andmete toomist ja laadimist ning nende renderdamist.

Selleks kasutame onEndReached rekvisiidile antud FlatList, mis kutsutakse tagasi, kui kasutaja kerib loendi lõppu. Peaksime uuendama ka oma Käesolev lehekülg olekut, et jälgida, millisel lehel me praegu oleme.

Siin on värskendatud kood, mis seda kõike rakendab:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { FlatList, View, Text } alates'react-native';
konst Rakendus = () => {
konst [raamatud, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(vale);
 useEffect(() => {
 tõmbaraamatud (praegune leht).then(andmeid => setBooks (andmed));
 }, []);
konst too rohkem = asünkr () => {
kui (laetakse) tagasi;
 setIsLoading(tõsi);
konst nextPage = praegune leht + 1;
konst uued andmed = ootama tõmbaraamatud (järgmine leht);
 setCurrentPage (nextPage);
 setIsLoading(vale);
 setBooks(prevData => [...prevData, ...newData]);
 };
konst renderItem = ({ item }) => {
tagasi (
polsterdus: 16 }}>
fondi suurus: 18 }}>{item.title}</Text>
fondi suurus: 14 }}>{item.author}</Text>
 </View>
 );
 };
tagasi (
 data={raamatud}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
eksportidavaikimisi Rakendus;

Siin oleme lisanud kaks uut osariiki nimega on laadimine ja onEndReachedThreshold. on laadimine jälgib, kas me praegu andmeid toome, ja onEndReachedThreshold vallandab onEndReached tagasihelistamine, kui kasutaja on kerinud loendi lõpust 10% täpsusega.

Lõime uue funktsiooni nimega too rohkem mis jookseb siis, kui onEndReached vallandatakse. See kontrollib, kas me juba laadime andmeid, ja kui ei, siis toob see andmete järgmise lehe ja värskendab meie loendit.

Lõpuks lisasime omale uued vajalikud rekvisiidid FlatList komponent. The FlatList komponent laadib nüüd dünaamiliselt andmeid, kui kasutaja loendi lõppu kerib.

Parandage oma rakenduse jõudlust kohandatud lehekülgede kasutamise abil

Õppisite, kuidas React Native'is andmeid dünaamiliselt laadida oma kohandatud lehekülgede otsimissüsteemiga. See meetod annab teile rakenduses suurte andmemahtude käsitlemisel suurema paindlikkuse ja kontrolli. Ärge unustage kohandada oma lehekülgede arvu vastavalt rakenduse stiilile ja vajadustele. Soovitud välimuse ja funktsionaalsuse saavutamiseks saate seda veelgi kohandada. Üldiselt aitaks see teil kindlasti oma rakenduse toimivust optimeerida.