Az egyéni lapozás dinamikus adatbetöltéssel javíthatja az alkalmazás teljesítményét és általános felhasználói élményét.
A lapozás azt a rendszert jelenti, amely nagy mennyiségű adatot kisebb, jobban kezelhető darabokra vagy oldalakra oszt fel a teljesítmény és a használhatóság javítása érdekében. Az egyéni oldalszámozás, ha megfelelően van megvalósítva, jobb felhasználói élményt biztosíthat. Ismerje meg, hogyan hozhat létre egyéni lapozási megoldást a React Native alkalmazásban, amely lehetővé teszi az adatok dinamikus betöltését.
Az egyéni lapozás megértése
Az egyéni lapozással a fejlesztők olyan lapozási mechanizmust hozhatnak létre, amely megfelel az alkalmazásuk speciális követelményeinek. Az egyéni lapozás magában foglalhatja az oldalak közötti navigáláshoz egyedi felhasználói felület megtervezését, valamint az ehhez szükséges algoritmusok megvalósítását adatok lekérése adatbázisból vagy API-ból, vagy olyan funkciókat tartalmaz, mint a végtelen görgetés vagy a lusta betöltés.
Az egyéni lapozás előnyei
Egyéni oldalszámozási rendszer létrehozása a React Native mobilalkalmazásokhoz bizonyos előnyökkel járhat:
- Javíthatja az alkalmazás méretezhetőségét, lehetővé téve a nagyobb mennyiségű adat hatékonyabb kezelését. Ez különösen fontos azoknál az alkalmazásoknál, amelyek nagy adatkészletekkel foglalkoznak.
- Az egyéni oldalszámozás javíthatja az alkalmazás teljesítményét azáltal, hogy az adatokat kisebb és jobban kezelhető darabokra osztja fel. Ez csökkenti a betöltési időt.
- Az egyéni oldalszámozással nagyobb rugalmasságot és irányítást biztosít az alkalmazáson belüli adatok megjelenítésében és elérésében.
Dinamikus betöltés megvalósítása egyéni lapozással
Ha a React Native alkalmazás csak azokat az adatokat tölti be, amelyeket akkor be kell töltenie, akkor dinamikus betöltésnek nevezzük. A dinamikus betöltés egyéni oldalszámozással való megvalósításához kövesse az alábbi általános lépéseket:
- Határozza meg a lapozás módját!: Döntse el a tartalomhoz legjobban megfelelő oldalszámozási módszert. Ez lehet hagyományos oldal alapú lapozási rendszer, ahol a felhasználók rákattintva betöltik a következő oldalt, vagy egy végtelen görgetés rendszer, ahol több tartalom töltődik be, ahogy a felhasználó lefelé görget az oldalon.
- Írjon szerveroldali és kliensoldali kódot: Ön szerveroldali kódot ír, amely kezeli az oldalszámozási kérelmeket bizonyos adatoldalakhoz, és csak az adott oldal adatait adja vissza. Ezután kliensoldali kódot kell írnia, hogy figyelje azokat a felhasználói műveleteket, amelyek további adatokra vonatkozó kéréseket indítanak el, például a gombra kattintva Load More gombot, vagy görgessen az oldal aljára.
- Végezze el az adatbetöltést: Amikor a felhasználó több adatra vonatkozó kérést indít el, az alkalmazásnak kérést kell küldenie a szerveroldalnak az adatok következő oldalára vonatkozóan. A szerveroldalnak ezután csak az adott oldal adatait kell visszaadnia, amelyeket az alkalmazás az oldal frissítéséhez használhat.
- Frissítse az oldalt: Végül frissíti az oldalt az újonnan betöltött adatokkal. Ez magában foglalhatja az új adatok hozzáfűzését egy meglévő elemlistához, vagy a teljes lista új adatokkal való helyettesítését.
Az adatforrás beállítása
Az egyéni lapozás megvalósításának első lépése a React Native alkalmazásban az adatforrás beállítása. Ez általában magában foglalja az adatok lekérését egy API-ból vagy adatbázisból, és egy állapotváltozóban való tárolását. Fontolgat egy egyszerű REST API amely visszaadja a könyvek listáját.
Íme egy példa arra, hogyan nézhet ki az API-válasz:
{
"adat": [
{
"azonosító": 1,
"cím": "Zabhegyező",
"szerző": "J.D. Salinger"
},
{
"azonosító": 2,
"cím": "Megölni egy gúnymadarat",
"szerző": "Harper Lee"
},
// ...
],
"oldal": 1,
"összes oldal": 5
}
Az adatok lekéréséhez a React Native alkalmazásunkban használhatjuk a elhozni függvényt, amely a Ígéret amely a REST API válaszával megoldódik.
Egyéni lapozási függvény létrehozása
Folytassa egy olyan funkció létrehozásával, amely lekéri az adatokat az API-ból, és frissíti az állapotot az újonnan kapott adatokkal. Ez a funkció dönti el, hogy mit jelenítsen meg a React Native alkalmazás képernyőjén.
Jól definiálja ezt a függvényt aszinkron függvényként amely egy oldalparamétert vesz, és egy ígéretet ad vissza, amely a lekért adatokkal megoldódik.
const PAGE_SIZE = 10;
const fetchBooks = async (oldal) => {
próbáld ki {
const válasz = várja fetch(` https://myapi.com/books? oldal=${page}&pageSize=${PAGE_SIZE}`);
const json = várja válasz.json();
Visszatérés json.data;
} fogás (hiba) {
konzol.error (hiba);
Visszatérés [];
}
}
A fenti kódblokkban a fetchBooks függvény a oldalon paramétert, és olyan ígéretet ad vissza, amely az adott oldal adataival oldódik meg. Itt, a OLDALMÉRET A konstans az oldalanként lekért könyvek számának korlátozására szolgál.
Dinamikus betöltés megvalósítása az egyéni lapozási funkció segítségével
Az egyéni lapozási funkció definiálásával mostantól dinamikus betöltés valósítható meg az alkalmazásban. Ehhez használja a FlatList komponens, amely egy nagy teljesítményű összetevő nagy adatlisták megjelenítéséhez a React Native alkalmazásban.
Először állítsa be a FlatList komponens valamilyen kezdeti állapottal:
import React, { useState, useEffect } tól től'reagál';
import { FlatList, View, Text } tól től"react-native";const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);useEffect(() => {
// Az adatok kezdeti oldalának lekérése
fetchBooks (currentPage).then(adat => setBooks (adatok));
}, []);const renderItem = ({ elem }) => {
Visszatérés (betűméret: 18 }}>{item.title}</Text> betűméret: 14 }}>{item.author}</Text>
</View>
);
};Visszatérés (
data={books}
renderItem={renderItem}
keyExtractor={elem => item.id.toString()}
/>
);
}
exportalapértelmezett App;
Ez a kód beállítja a FlatList komponenst két állapottal, nevezetesen könyveket és aktuális oldal. Használjuk a useEffect() horog az adatok kezdeti oldalának lekéréséhez, amikor alkalmazásunk először fut.
Ezután meghatározzuk a renderItem függvény, amely átvesz egy elemet a könyveket tömb és visszaadja a Kilátás tartalmazza a könyv címét és szerzőjét.
Végül túljutottunk a könyveket tömb a adat kelléke a FlatList, a miénkkel együtt renderItem funkció és keyExtractor.
Most meg kell győződnünk arról, hogy a Flatlistunk képes észlelni, ha egy felhasználó a lista végére görget. Ezen a ponton folytatnia kell az új adatok lekérését és betöltését, valamint a megjelenítést.
Ehhez a onEndReached támasztékot biztosított a FlatList, amely egy visszahívás, amikor a felhasználó a lista végére görget. Frissítenünk kell a mieinket is aktuális oldal állapotot, hogy nyomon kövessük, hogy éppen melyik oldalon vagyunk.
Íme a frissített kód, amely mindezt megvalósítja:
import React, { useState, useEffect } tól től'reagál';
import { FlatList, View, Text } tól től"react-native";const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(hamis);useEffect(() => {
fetchBooks (currentPage).then(adat => setBooks (adatok));
}, []);const fetchMore = async () => {
ha (Betöltés alatt) Visszatérés;setIsLoading(igaz);
const nextPage = aktuális Oldal + 1;
const newData = várja fetchBooks (nextPage);setCurrentPage (nextPage);
setIsLoading(hamis);
setBooks(prevData => [...prevData, ...newData]);
};const renderItem = ({ elem }) => {
Visszatérés (párnázás: 16 }}> betűméret: 18 }}>{item.title}</Text> betűméret: 14 }}>{item.author}</Text>
</View>
);
};Visszatérés (
data={books}
renderItem={renderItem}
keyExtractor={elem => item.id.toString()}
onEndReached={fetchTovább}
onEndReachedThreshold={0.1}
/>
);
}
exportalapértelmezett App;
Itt két új állapotot adtunk hozzá isBetöltés és onEndReachedThreshold. isBetöltés nyomon követi, hogy éppen lekérjük-e az adatokat, és onEndReachedThreshold tűz a onEndReached visszahívás, ha a felhasználó a lista végének 10%-án belülre gördült.
Létrehoztunk egy új függvényt, melynek neve fetchTovább hogy mikor fut onEndReached ki van rúgva. Ellenőrzi, hogy töltünk-e be már adatokat, ha pedig nem, akkor lekéri a következő adatoldalt, és frissíti a listánkat.
Végül hozzáadtuk a szükséges új kellékeket FlatList összetevő. A FlatList komponens mostantól dinamikusan tölti be az adatokat, miközben a felhasználó a lista végére görget.
Növelje alkalmazása teljesítményét egyéni oldalszámozással
Megtanulta, hogyan tölthet be dinamikusan adatokat a React Native alkalmazásban saját egyéni lapozási rendszerével. Ez a módszer nagyobb rugalmasságot és irányítást biztosít, amikor nagy mennyiségű adatot kezel az alkalmazásban. Ne felejtse el az oldalszámozást az alkalmazás stílusához és igényeihez igazítani. A kívánt megjelenés és funkcionalitás elérése érdekében még tovább testreszabhatja. Összességében minden bizonnyal segítene optimalizálni az alkalmazás teljesítményét.
