Ako dynamicky načítať údaje pomocou vlastného stránkovania v React Native

Stránkovanie sa týka systému rozdeľovania veľkého množstva údajov na menšie, lepšie spravovateľné časti alebo stránky na zlepšenie výkonu a použiteľnosti. Vlastné stránkovanie, ak je správne implementované, môže poskytnúť lepšiu používateľskú skúsenosť. Zistite, ako vytvoriť vlastné riešenie stránkovania v React Native, ktoré vám umožní dynamicky načítať údaje.

Pochopenie vlastného stránkovania

Pomocou vlastného stránkovania môžu vývojári vytvoriť mechanizmus stránkovania, ktorý vyhovuje špecifickým požiadavkám ich aplikácie. Vlastné stránkovanie môže zahŕňať návrh jedinečného používateľského rozhrania na navigáciu medzi stránkami, implementáciu algoritmov získavanie údajov z databázy alebo APIalebo začlenenie funkcií, ako je nekonečné posúvanie alebo lenivé načítanie.

Výhody vlastného stránkovania

Vytvorenie vlastného systému stránkovania pre mobilné aplikácie React Native môže ponúknuť niekoľko výhod:

• Môže zlepšiť škálovateľnosť vašej aplikácie a umožní jej efektívnejšie spracovávať väčšie množstvo údajov. Toto je obzvlášť dôležité pre aplikácie, ktoré pracujú s veľkými množinami údajov.
• Vlastné stránkovanie môže zlepšiť výkon vašej aplikácie rozdelením údajov na menšie a lepšie spravovateľné časti. Tým sa skráti čas načítania.
• Vďaka vlastnému stránkovaniu budete mať väčšiu flexibilitu a kontrolu pri prezentovaní a prístupe k údajom vo vašej aplikácii.

Implementácia dynamického načítania s vlastným stránkovaním

Keď vaša aplikácia React Native načíta iba potrebné údaje, ktoré potrebuje v danom čase načítať, potom sa to označuje ako dynamické načítanie. Ak chcete implementovať dynamické načítanie s vlastným stránkovaním, môžete postupovať podľa týchto všeobecných krokov:

1. Určite metódu stránkovania: Rozhodnite sa pre spôsob stránkovania, ktorý najlepšie vyhovuje vášmu obsahu. Toto by mohlo byť tradičné na základe stránky stránkovací systém, kde používatelia kliknú na načítanie ďalšej stránky, alebo an nekonečný zvitok systém, kde sa načítava viac obsahu, keď sa používateľ posúva nadol po stránke.
2. Napíšte kód na strane servera a klienta: Napíšete kód na strane servera na spracovanie požiadaviek na stránkovanie pre konkrétne stránky s údajmi a vrátite iba údaje pre danú stránku. Potom napíšete kód na strane klienta, aby ste počúvali akcie používateľa, ktoré spúšťajú požiadavky na ďalšie údaje, napríklad kliknutie na a Načítať viac tlačidlo alebo rolovanie do spodnej časti stránky.
3. Implementujte načítanie údajov: Keď používateľ spustí požiadavku na ďalšie údaje, aplikácia by mala odoslať požiadavku na stranu servera o ďalšiu stránku údajov. Strana servera by potom mala vrátiť iba údaje pre túto stránku, ktoré môže aplikácia použiť na aktualizáciu stránky.
4. Aktualizujte stránku: Nakoniec stránku aktualizujete novými načítanými údajmi. Môže to zahŕňať pridanie nových údajov k existujúcemu zoznamu položiek alebo nahradenie celého zoznamu novými údajmi.

Nastavenie zdroja údajov

Prvým krokom pri implementácii vlastného stránkovania v React Native je nastavenie zdroja údajov. To zvyčajne zahŕňa načítanie údajov z API alebo databázy a ich uloženie do stavovej premennej. Zvážte jednoduché REST API ktorý vráti zoznam kníh.

Tu je príklad toho, ako môže odpoveď rozhrania API vyzerať:

{
"údaje": [
 {
"id": 1,
"titul": "Kto chytá v žite",
"autor": "J.D. Salinger"
 },
 {
"id": 2,
"titul": "Zabiť posmievaného vtáka",
"autor": "Harper Lee"
 },
// ...
 ],
"stránka": 1,
"totalPages": 5
}

Na získanie týchto údajov v našej aplikácii React Native môžeme použiť aport funkcia, ktorá vracia a Sľub ktorý sa vyrieši odpoveďou z REST API.

Vytvorenie funkcie vlastného stránkovania

Poďme k vytvoreniu funkcie, ktorá načíta údaje z API a aktualizuje stav pomocou novo prijatých údajov. Táto funkcia rozhodne, čo sa má vykresliť na obrazovke aplikácie React Native.

Budeme definujte túto funkciu ako asynchrónnu ktorý vezme parameter stránky a vráti prísľub, ktorý sa vyrieši s načítanými údajmi.

konšt PAGE_SIZE = 10;
konšt fetchBooks = async (strana) => {
skúste {
konšt odpoveď = čakať priniesť (` https://myapi.com/books? strana=${page}&pageSize=${PAGE_SIZE}`);
konšt json = čakať response.json();
vrátiť json.data;
 } chytiť (chyba) {
konzoly.chyba (chyba);
vrátiť [];
 }
}

Vo vyššie uvedenom bloku kódu je fetchBooks funkcia trvá a stránku parameter a vráti prísľub, ktorý sa vyrieši s údajmi z tejto stránky. Tu, PAGE_SIZE konštanta sa používa na obmedzenie počtu kníh stiahnutých na stránku.

Implementácia dynamického načítania pomocou funkcie Vlastné stránkovanie

S definovanou funkciou vlastného stránkovania ju teraz môžete použiť na implementáciu dynamického načítania v aplikácii. Ak to chcete urobiť, použite FlatList komponent, ktorý je vysokovýkonným komponentom na vykresľovanie veľkých zoznamov údajov v React Native.

Najprv nastavte FlatList komponent s určitým počiatočným stavom:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { FlatList, View, Text } od„react-native“;
konšt Aplikácia = () => {
konšt [books, setBooks] = useState([]);
konšt [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Načítanie úvodnej stránky údajov
 fetchBooks (currentPage).then(údajov => setBooky (dáta));
 }, []);
konšt renderItem = ({ položka }) => {
vrátiť (

veľkosť písma: 18 }}>{item.title}</Text>
veľkosť písma: 14 }}>{item.author}</Text>
 </View>
 );
 };
vrátiť (
 data={books}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
exportpredvolená App;

Tento kód nastavuje komponent FlatList s dvoma časťami stavu, a to knihy a aktuálna stránka. Používame useEffect() háčik na načítanie úvodnej stránky s údajmi pri prvom spustení našej aplikácie.

Ďalej definujeme a renderItem funkcia, ktorá preberá položku z knihy pole a vráti a vyhliadka obsahuje názov knihy a autora.

Nakoniec sme prešli knihy pole k údajov opora z FlatList, spolu s našimi renderItem funkciu a keyExtractor.

Teraz sa musíme uistiť, že náš Flatlist dokáže rozpoznať, keď sa používateľ posunie na koniec zoznamu. V tomto bode by mal pokračovať v načítaní a načítaní nových údajov a ich vykreslení.

Na tento účel použijeme onEndReached rekvizita poskytnutá na FlatList, čo je spätné volanie, ktoré sa volá, keď používateľ prejde na koniec zoznamu. Mali by sme tiež aktualizovať naše aktuálna stránka stavu, aby ste mali prehľad o tom, na ktorej stránke sa práve nachádzame.

Tu je aktualizovaný kód, ktorý to všetko implementuje:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { FlatList, View, Text } od„react-native“;
konšt Aplikácia = () => {
konšt [books, setBooks] = useState([]);
konšt [currentPage, setCurrentPage] = useState(1);
konšt [isLoading, setIsLoading] = useState(falošný);
 useEffect(() => {
 fetchBooks (currentPage).then(údajov => setBooky (dáta));
 }, []);
konšt získaťViac = async () => {
ak (isLoading) vrátiť;
 setIsLoading(pravda);
konšt nextPage = aktuálna strana + 1;
konšt nové údaje = čakať fetchBooks (ďalšia strana);
 setCurrentPage (nextPage);
 setIsLoading(falošný);
 setBooks(prevData => [...prevData, ...newData]);
 };
konšt renderItem = ({ položka }) => {
vrátiť (
vypchávka: 16 }}>
veľkosť písma: 18 }}>{item.title}</Text>
veľkosť písma: 14 }}>{item.author}</Text>
 </View>
 );
 };
vrátiť (
 data={books}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
exportpredvolená App;

Tu sme pridali dva nové štáty tzv isLoading a onEndReachedThreshold. isLoading sleduje, či práve načítavame údaje a onEndReachedThreshold vystrelí onEndReached spätné volanie, keď používateľ prejde do 10 % od konca zoznamu.

Vytvorili sme novú funkciu tzv fetchMore že beží kedy onEndReached je vyhodený. Skontroluje, či už načítavame údaje, a ak nie, načíta ďalšiu stránku údajov a aktualizuje náš zoznam.

Nakoniec sme do našich pridali aj nové potrebné rekvizity FlatList komponent. The FlatList komponent teraz dynamicky načíta údaje, keď sa používateľ posúva na koniec zoznamu.

Zlepšite výkon svojej aplikácie pomocou vlastného stránkovania

Naučili ste sa, ako dynamicky načítať údaje v React Native s vaším vlastným systémom stránkovania. Táto metóda vám poskytuje väčšiu flexibilitu a kontrolu pri práci s veľkým množstvom údajov vo vašej aplikácii. Nezabudnite prispôsobiť stránkovanie tak, aby zodpovedalo štýlu a potrebám vašej aplikácie. Môžete si ho ešte viac prispôsobiť, aby ste dosiahli požadovaný vzhľad a funkčnosť. Celkovo by vám to určite pomohlo optimalizovať výkon vašej aplikácie.