Jak dynamicky načítat data pomocí vlastního stránkování v React Native

Stránkování označuje systém rozdělování velkého množství dat do menších, lépe spravovatelných částí nebo stránek za účelem zlepšení výkonu a použitelnosti. Vlastní stránkování, pokud je správně implementováno, může poskytnout lepší uživatelský dojem. Naučte se, jak vytvořit vlastní řešení stránkování v React Native, které vám umožní dynamicky načítat data.

Pochopení vlastního stránkování

Pomocí vlastního stránkování mohou vývojáři vytvořit mechanismus stránkování, který vyhovuje specifickým požadavkům jejich aplikace. Vlastní stránkování může zahrnovat návrh jedinečného uživatelského rozhraní pro navigaci mezi stránkami, implementaci algoritmů pro načítání dat z databáze nebo APInebo začlenění funkcí, jako je nekonečné posouvání nebo líné načítání.

Výhody vlastního stránkování

Vytvoření vlastního systému stránkování pro mobilní aplikace React Native může nabídnout některé výhody:

• Může zlepšit škálovatelnost vaší aplikace a umožnit jí efektivněji zpracovávat větší objemy dat. To je důležité zejména pro aplikace, které pracují s velkými datovými sadami.
  instagram viewer
• Vlastní stránkování může zlepšit výkon vaší aplikace rozdělením dat do menších a lépe spravovatelných částí. Tím se zkrátí doba načítání.
• S vlastním stránkováním budete mít větší flexibilitu a kontrolu při prezentaci a přístupu k datům ve vaší aplikaci.

Implementace dynamického načítání s vlastním stránkováním

Když vaše aplikace React Native načte pouze nezbytná data, která v tu chvíli potřebuje načíst, nazývá se to dynamické načítání. Chcete-li implementovat dynamické načítání s vlastním stránkováním, můžete postupovat podle těchto obecných kroků:

1. Určete metodu stránkování: Rozhodněte se pro metodu stránkování, která nejlépe vyhovuje vašemu obsahu. Tohle může být tradiční založené na stránce stránkovací systém, kde uživatelé kliknutím načtou další stránku, nebo an nekonečný svitek systém, kde se načítá další obsah, když uživatel posouvá stránku dolů.
2. Napište kód na straně serveru a na straně klienta: Napíšete kód na straně serveru pro zpracování požadavků na stránkování pro konkrétní stránky dat a vrátíte pouze data pro danou stránku. Poté napíšete kód na straně klienta, který bude naslouchat uživatelským akcím, které spouštějí požadavky na další data, jako je kliknutí na a Načíst další nebo přejděte na konec stránky.
3. Implementujte načítání dat: Když uživatel spustí požadavek na další data, aplikace by měla odeslat požadavek na stranu serveru o další stránku dat. Strana serveru by pak měla vrátit pouze data pro danou stránku, která může aplikace použít k aktualizaci stránky.
4. Aktualizujte stránku: Nakonec stránku aktualizujete nově načtenými daty. To může zahrnovat připojení nových dat k existujícímu seznamu položek nebo nahrazení celého seznamu novými daty.

Nastavení zdroje dat

Prvním krokem při implementaci vlastního stránkování v React Native je nastavení zdroje dat. To obvykle zahrnuje načítání dat z API nebo databáze a jejich uložení do stavové proměnné. Zvážit jednoduché REST API který vrátí seznam knih.

Zde je příklad toho, jak může odpověď API vypadat:

{
"data": [
 {
"id": 1,
"titul": "Kdo chytá v žitě",
"autor": "J.D. Salinger"
 },
 {
"id": 2,
"titul": "Zabít drozda",
"autor": "Harper Lee"
 },
// ...
 ],
"strana": 1,
"totalPages": 5
}

K načtení těchto dat v naší aplikaci React Native můžeme použít vynést funkce, která vrací a Slib který se vyřeší odezvou z REST API.

Vytvoření vlastní funkce stránkování

Pokračujme ve vytvoření funkce, která načte data z API a aktualizuje stav nově přijatými daty. Tato funkce rozhodne, co se má vykreslit na obrazovce aplikace React Native.

Studna definovat tuto funkci jako asynchronní který vezme parametr stránky a vrátí Promise, který se vyřeší s načtenými daty.

konst PAGE_SIZE = 10;
konst fetchBooks = asynchronní (stránka) => {
Snaž se {
konst odpověď = čekat vynést(` https://myapi.com/books? stránka=${page}&pageSize=${PAGE_SIZE}`);
konst json = čekat response.json();
vrátit se json.data;
 } chytit (chyba) {
řídicí panel.chyba (chyba);
vrátit se [];
 }
}

Ve výše uvedeném bloku kódu je fetchBooks funkce trvá a strana a vrátí Promise, který se vyřeší s daty z této stránky. Tady, VELIKOST STRÁNKY Konstanta se používá k omezení počtu knih načtených na stránku.

Implementace dynamického načítání pomocí funkce Vlastní stránkování

S definovanou funkcí vlastního stránkování ji nyní můžete použít k implementaci dynamického načítání v aplikaci. Chcete-li to provést, použijte FlatList komponenta, což je vysoce výkonná komponenta pro vykreslování velkých seznamů dat v React Native.

Nejprve nastavte FlatList komponenta s nějakým počátečním stavem:

import Reagovat, { useState, useEffect } z'reagovat';
import { FlatList, View, Text } z'react-native';
konst Aplikace = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Načtení úvodní stránky dat
 fetchBooks (currentPage).then(data => setBooky (data));
 }, []);
konst renderItem = ({ položka }) => {
vrátit se (

velikost písma: 18 }}>{item.title}</Text>
velikost písma: 14 }}>{item.author}</Text>
 </View>
 );
 };
vrátit se (
 data={books}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
vývoznívýchozí Aplikace;

Tento kód nastavuje komponentu FlatList se dvěma stavy, jmenovitě knihy a aktuální stránka. Používáme useEffect() háček pro načtení úvodní stránky dat při prvním spuštění naší aplikace.

Dále definujeme a renderItem funkce, která přebírá položku z knihy pole a vrátí a Pohled obsahující název knihy a autora.

Konečně jsme prošli knihy pole k data podpěra toho FlatList, spolu s naším renderItem funkce a keyExtractor.

Nyní se musíme ujistit, že náš Flatlist dokáže rozpoznat, kdy se uživatel posune na konec seznamu. V tomto okamžiku by měl pokračovat v načítání a načítání nových dat a vykreslování.

K tomu použijeme onEndReached rekvizita poskytnutá FlatList, což je zpětné volání volané, když uživatel přejde na konec seznamu. Měli bychom také aktualizovat naše aktuální stránka stavu, abyste měli přehled o tom, na které stránce se právě nacházíme.

Zde je aktualizovaný kód implementující toto vše:

import Reagovat, { useState, useEffect } z'reagovat';
import { FlatList, View, Text } z'react-native';
konst Aplikace = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(Nepravdivé);
 useEffect(() => {
 fetchBooks (currentPage).then(data => setBooky (data));
 }, []);
konst načístVíce = asynchronní () => {
-li (isLoading) vrátit se;
 setIsLoading(skutečný);
konst nextPage = aktuální strana + 1;
konst newData = čekat fetchBooks (další stránka);
 setCurrentPage (nextPage);
 setIsLoading(Nepravdivé);
 setBooky(prevData => [...prevData, ...newData]);
 };
konst renderItem = ({ položka }) => {
vrátit se (
vycpávka: 16 }}>
velikost písma: 18 }}>{item.title}</Text>
velikost písma: 14 }}>{item.author}</Text>
 </View>
 );
 };
vrátit se (
 data={books}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
vývoznívýchozí Aplikace;

Zde jsme přidali dva nové stavy tzv isLoading a onEndReachedThreshold. isLoading sleduje, zda aktuálně načítáme data, a onEndReachedThreshold vystřelí onEndReached zpětné volání, když se uživatel posune do 10 % od konce seznamu.

Vytvořili jsme novou funkci tzv načístVíce že běží, když onEndReached je vyhozen. Zkontroluje, zda již načítáme data, a pokud ne, načte další stránku dat a aktualizuje náš seznam.

Nakonec jsme do našeho přidali nové potřebné rekvizity FlatList komponent. The FlatList komponenta bude nyní dynamicky načítat data, když uživatel posouvá na konec seznamu.

Zlepšete výkon své aplikace pomocí vlastního stránkování

Naučili jste se, jak dynamicky načítat data v React Native pomocí vlastního systému stránkování. Tato metoda vám poskytuje větší flexibilitu a kontrolu při práci s velkým množstvím dat ve vaší aplikaci. Nezapomeňte upravit stránkování tak, aby odpovídalo stylu a potřebám vaší aplikace. Můžete si jej ještě dále přizpůsobit, abyste dosáhli požadovaného vzhledu a funkčnosti. Celkově by vám to určitě pomohlo optimalizovat výkon vaší aplikace.