Anpassad paginering med dynamisk dataladdning kan förbättra prestandan och den övergripande användarupplevelsen av din app.
Paginering hänvisar till systemet för att dela upp stora mängder data i mindre, mer hanterbara bitar eller sidor för att förbättra prestanda och användbarhet. Anpassad paginering, om den implementeras på rätt sätt, kan ge en bättre användarupplevelse. Lär dig hur du skapar en anpassad pagineringslösning i React Native som låter dig ladda data dynamiskt.
Förstå anpassad paginering
Med anpassad paginering kan utvecklare skapa en pagineringsmekanism som passar de specifika kraven för deras applikation. Anpassad paginering kan innebära att designa ett unikt användargränssnitt för att navigera mellan sidor, implementera algoritmer för hämta data från en databas eller API, eller med funktioner som oändlig rullning eller lat laddning.
Fördelar med anpassad paginering
Att skapa ett anpassat sidnumreringssystem för dina React Native-mobilappar kan erbjuda några fördelar:
- Det kan förbättra din apps skalbarhet, vilket gör att den kan hantera större mängder data mer effektivt. Detta är särskilt viktigt för appar som hanterar stora datamängder.
- Anpassad paginering kan förbättra prestandan för din app genom att dela upp data i mindre och mer hanterbara bitar. Detta kommer att minska laddningstiden.
- Med anpassad paginering får du ökad flexibilitet och kontroll när det gäller att presentera och komma åt data i din app.
Implementera dynamisk laddning med anpassad paginering
När din React Native-applikation bara laddar de nödvändiga data som den behöver ladda vid den tidpunkten kallas det för dynamisk laddning. För att implementera dynamisk laddning med anpassad paginering kan du följa dessa allmänna steg:
- Bestäm sideringsmetoden: Bestäm dig för en sidnumreringsmetod som fungerar bäst för ditt innehåll. Detta kan vara en traditionell sidbaserad pagineringssystem, där användare klickar för att ladda nästa sida, eller en oändlig rullning system, där mer innehåll laddas när användaren rullar ner på sidan.
- Skriv kod på serversidan och klientsidan: Du kommer att skriva kod på serversidan för att hantera sideringsförfrågningar för specifika sidor med data och endast returnera data för den sidan. Du kommer sedan att skriva kod på klientsidan för att lyssna efter användaråtgärder som utlöser begäranden om mer data, som att klicka på en Ladda mer knappen eller rulla till botten av sidan.
- Implementera dataladdningen: När användaren utlöser en begäran om mer data, bör appen skicka en begäran till serversidan för nästa sida med data. Serversidan bör då endast returnera data för den sidan, som appen kan använda för att uppdatera sidan.
- Uppdatera sidan: Slutligen kommer du att uppdatera sidan med nyinlästa data. Detta kan handla om att lägga till nya data till en befintlig lista med objekt eller ersätta hela listan med nya data.
Ställa in datakällan
Det första steget för att implementera anpassad paginering i React Native är att ställa in din datakälla. Detta innebär vanligtvis att data hämtas från ett API eller en databas och lagras i en tillståndsvariabel. Överväga ett enkelt REST API som returnerar en lista med böcker.
Här är ett exempel på hur API-svaret kan se ut:
{
"data": [
{
"id": 1,
"titel": "Räddaren i nöden",
"författare": "J.D. Salinger"
},
{
"id": 2,
"titel": "Att döda en mockingbird",
"författare": "Harper Lee"
},
// ...
],
"sida": 1,
"totalPages": 5
}
För att hämta denna data i vår React Native-app kan vi använda hämta funktion, som returnerar en Löfte som löser sig med svaret från REST API.
Skapa en anpassad pagineringsfunktion
Låt oss fortsätta med att skapa en funktion som hämtar data från API: t och uppdaterar tillståndet med ny mottagen data. Den här funktionen avgör vad som ska renderas på skärmen i React Native-appen.
Väl definiera denna funktion som en asynkron funktion som tar en sidparameter och returnerar ett löfte som löser sig med hämtad data.
konst PAGE_SIZE = 10;
konst hämta böcker = asynkron (sida) => {
Prova {
konst svar = vänta hämta(` https://myapi.com/books? sida=${page}&pageSize=${PAGE_SIZE}`);
konst json = vänta response.json();
lämna tillbaka json.data;
} fånga (fel) {
trösta.error (fel);
lämna tillbaka [];
}
}
I kodblocket ovan visas hämta böcker funktionen tar en sida parameter och returnerar ett löfte som löser sig med data från den sidan. Här, den SIDSTORLEK konstant används för att begränsa antalet böcker som hämtas per sida.
Implementera dynamisk laddning med hjälp av den anpassade pagineringsfunktionen
Med den anpassade pagineringsfunktionen definierad kan du nu använda den för att implementera dynamisk laddning i appen. För att göra detta, använd FlatList komponent, som är en högpresterande komponent för att rendera stora listor med data i React Native.
Ställ först in FlatList komponent med något initialtillstånd:
importera Reagera, { useState, useEffect } från'reagera';
importera { FlatList, View, Text } från"reagera-native";konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);useEffect(() => {
// Hämta den första sidan med data
fetchBooks (currentPage).then(data => setBooks (data));
}, []);konst renderItem = ({ Artikel }) => {
lämna tillbaka (textstorlek: 18 }}>{item.title}</Text> textstorlek: 14 }}>{item.author}</Text>
</View>
);
};lämna tillbaka (
data={böcker}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
exporterastandard App;
Denna kod ställer in FlatList-komponenten med två delstater, nämligen böcker och nuvarande sida. Vi använder useEffect() krok för att hämta den första sidan med data när vår app körs för första gången.
Därefter definierar vi a renderItem funktion som tar ett objekt från böcker array och returnerar en Se innehållande bokens titel och författare.
Äntligen har vi passerat böcker array till data rekvisita av FlatList, tillsammans med vår renderItem funktion och keyExtractor.
Vi måste nu se till att vår Flatlist kan upptäcka när en användare rullar till slutet av listan. Vid den tidpunkten bör den fortsätta att hämta och ladda den nya datan och rendera den.
För att göra detta använder vi onEndReached rekvisita som tillhandahålls till FlatList, vilket är en återuppringning som anropas när användaren rullar till slutet av listan. Vi bör också uppdatera vår nuvarande sida stat för att hålla reda på vilken sida vi är på just nu.
Här är den uppdaterade koden som implementerar allt detta:
importera Reagera, { useState, useEffect } från'reagera';
importera { FlatList, View, Text } från"reagera-native";konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(falsk);useEffect(() => {
fetchBooks (currentPage).then(data => setBooks (data));
}, []);konst hämtaMer = asynkron () => {
om (laddar) lämna tillbaka;setIsLoading(Sann);
konst nästa sida = aktuell sida + 1;
konst newData = vänta hämta böcker (nästa sida);setCurrentPage (nextPage);
setIsLoading(falsk);
setBooks(prevData => [...prevData, ...newData]);
};konst renderItem = ({ Artikel }) => {
lämna tillbaka (stoppning: 16 }}> textstorlek: 18 }}>{item.title}</Text> textstorlek: 14 }}>{item.author}</Text>
</View>
);
};lämna tillbaka (
data={böcker}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
exporterastandard App;
Här har vi lagt till två nya stater som kallas laddar och onEndReachedThreshold. laddar håller reda på om vi för närvarande hämtar data, och onEndReachedThreshold avfyrar onEndReached återuppringning när användaren har scrollat till inom 10 % från slutet av listan.
Vi skapade en ny funktion som heter hämta Mer som går när onEndReached får sparken. Den kontrollerar om vi redan laddar data, och om inte, hämtar den nästa sida med data och uppdaterar vår lista.
Slutligen lade vi till de nya nödvändiga rekvisita till vår FlatList komponent. De FlatList komponent kommer nu dynamiskt att ladda data när användaren rullar till slutet av listan.
Förbättra din app prestanda med hjälp av anpassad paginering
Du lärde dig hur du laddar data dynamiskt i React Native med ditt eget anpassade pagineringssystem. Denna metod ger dig mer flexibilitet och kontroll när du hanterar stora mängder data i din app. Kom ihåg att skräddarsy din paginering för att matcha din app stil och behov. Du kan anpassa den ytterligare för att uppnå önskat utseende och funktionalitet. Sammantaget skulle det definitivt hjälpa dig att optimera din app prestanda.