Sådan indlæses data dynamisk med tilpasset sideinddeling i React Native

Paginering refererer til systemet til at opdele store mængder data i mindre, mere håndterbare bidder eller sider for at forbedre ydeevne og brugervenlighed. Tilpasset paginering, hvis den implementeres korrekt, kan give en bedre brugeroplevelse. Lær, hvordan du opretter en tilpasset pagineringsløsning i React Native, der giver dig mulighed for at indlæse data dynamisk.

Forstå tilpasset sideinddeling

Med brugerdefineret paginering kan udviklere oprette en pagineringsmekanisme, der passer til de specifikke krav til deres applikation. Brugerdefineret paginering kan involvere at designe en unik brugergrænseflade til at navigere mellem sider, implementere algoritmer til hente data fra en database eller API, eller inkorporerer funktioner som uendelig rulning eller doven indlæsning.

Fordele ved brugerdefineret sideinddeling

Oprettelse af et brugerdefineret pagineringssystem til dine React Native-mobilapps kan give nogle fordele:

• Det kan forbedre din apps skalerbarhed, så den kan håndtere større mængder data mere effektivt. Dette er især vigtigt for apps, der beskæftiger sig med store datasæt.
• Brugerdefineret paginering kan forbedre ydeevnen af ​​din app ved at opdele data i mindre og mere håndterbare bidder. Dette vil reducere indlæsningstiden.
• Med tilpasset paginering får du øget fleksibilitet og kontrol med at præsentere og få adgang til data i din app.

Implementering af dynamisk indlæsning med brugerdefineret sideinddeling

Når din React Native-applikation kun indlæser de nødvendige data, den skal indlæse på det tidspunkt, kaldes det dynamisk indlæsning. For at implementere dynamisk indlæsning med tilpasset paginering kan du følge disse generelle trin:

1. Bestem pagineringsmetoden: Beslut dig for en pagineringsmetode, der fungerer bedst til dit indhold. Dette kunne være en traditionel sidebaseret pagineringssystem, hvor brugere klikker for at indlæse den næste side, eller en uendelig rulle system, hvor mere indhold indlæses, når brugeren scroller ned på siden.
2. Skriv kode på serversiden og klientsiden: Du vil skrive kode på serversiden for at håndtere pagineringsanmodningerne for specifikke sider med data og kun returnere dataene for den pågældende side. Du vil derefter skrive kode på klientsiden for at lytte efter brugerhandlinger, der udløser anmodninger om flere data, som at klikke på en Indlæs mere knappen eller rulle til bunden af ​​siden.
3. Implementer dataindlæsningen: Når brugeren udløser en anmodning om flere data, skal appen sende en anmodning til serversiden om den næste side med data. Serversiden skal så kun returnere dataene for den side, som appen kan bruge til at opdatere siden.
4. Opdater siden: Til sidst vil du opdatere siden med de nyligt indlæste data. Dette kunne indebære at tilføje de nye data til en eksisterende liste over elementer eller erstatte hele listen med de nye data.

Opsætning af datakilden

Det første trin i implementering af tilpasset paginering i React Native er at konfigurere din datakilde. Dette involverer typisk at hente data fra en API eller database og gemme dem i en tilstandsvariabel. Overveje en simpel REST API der returnerer en liste over bøger.

Her er et eksempel på, hvordan API-svaret kan se ud:

{
"data": [
 {
"id": 1,
"titel": "Forbandede Ungdom",
"forfatter": "J.D. Salinger"
 },
 {
"id": 2,
"titel": "At dræbe en drossel",
"forfatter": "Harper Lee"
 },
// ...
 ],
"side": 1,
"totalPages": 5
}

For at hente disse data i vores React Native-app kan vi bruge hente funktion, som returnerer en Løfte der løses med svaret fra REST API.

Oprettelse af en brugerdefineret sideinddelingsfunktion

Lad os fortsætte med at oprette en funktion, der henter dataene fra API'en og opdaterer tilstanden med de nyligt modtagne data. Denne funktion bestemmer, hvad der skal gengives på skærmen i React Native-appen.

Godt definere denne funktion som en asynkron funktion der tager en sideparameter og returnerer et løfte, der løses med de hentede data.

konst PAGE_SIZE = 10;
konst henteBøger = asynkron (side) => {
prøve {
konst svar = vente hente(` https://myapi.com/books? side=${side}&sidestørrelse=${PAGE_SIZE}`);
konst json = vente response.json();
Vend tilbage json.data;
 } fangst (fejl) {
konsol.fejl (fejl);
Vend tilbage [];
 }
}

I kodeblokken ovenfor er hente bøger funktion tager en side parameter og returnerer et løfte, der løses med dataene fra den side. Her, den PAGE_SIZE konstant bruges til at begrænse antallet af hentede bøger pr. side.

Implementering af dynamisk indlæsning ved hjælp af den brugerdefinerede sideinddelingsfunktion

Med den tilpassede pagineringsfunktion defineret, kan du nu bruge den til at implementere dynamisk indlæsning i appen. For at gøre dette skal du bruge Flad Liste komponent, som er en højtydende komponent til gengivelse af store lister med data i React Native.

Først skal du opsætte Flad Liste komponent med en eller anden begyndelsestilstand:

importere Reager, { useState, useEffect } fra'reagere';
importere { FlatList, View, Text } fra'reager-native';
konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Hent den første side med data
 fetchBooks (currentPage).then(data => sætbøger (data));
 }, []);
konst renderItem = ({ vare }) => {
Vend tilbage (

skriftstørrelse: 18 }}>{item.title}</Text>
skriftstørrelse: 14 }}>{item.author}</Text>
 </View>
 );
 };
Vend tilbage (
 data={bøger}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
eksportStandard App;

Denne kode opsætter FlatList-komponenten med to stykker tilstand, nemlig bøger og nuværende side. Vi bruger useEffect() krog for at hente den første side med data, når vores app først kører.

Dernæst definerer vi en renderItem funktion, der tager et element fra bøger array og returnerer en Udsigt indeholdende bogtitel og forfatter.

Endelig har vi bestået bøger række til data rekvisit af Flad Liste, sammen med vores renderItem funktion og keyExtractor.

Vi skal nu sørge for, at vores Flatlist kan registrere, når en bruger ruller til slutningen af ​​listen. På det tidspunkt skulle den fortsætte med at hente og indlæse de nye data og gengive dem.

For at gøre dette bruger vi onEndReached rekvisit leveret til Flad Liste, som er et tilbagekald kaldet, når brugeren ruller til slutningen af ​​listen. Vi bør også opdatere vores nuværende side stat for at holde styr på, hvilken side vi er på i øjeblikket.

Her er den opdaterede kode, der implementerer alt dette:

importere Reager, { useState, useEffect } fra'reagere';
importere { FlatList, View, Text } fra'reager-native';
konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(falsk);
 useEffect(() => {
 fetchBooks (currentPage).then(data => sætbøger (data));
 }, []);
konst henteMere = asynkron () => {
hvis (indlæser) Vend tilbage;
 setIsLoading(rigtigt);
konst næste side = nuværende side + 1;
konst newData = vente henteBøger (næste Side);
 setCurrentPage (nextPage);
 setIsLoading(falsk);
 sætbøger(prevData => [...prevData, ...newData]);
 };
konst renderItem = ({ vare }) => {
Vend tilbage (
polstring: 16 }}>
skriftstørrelse: 18 }}>{item.title}</Text>
skriftstørrelse: 14 }}>{item.author}</Text>
 </View>
 );
 };
Vend tilbage (
 data={bøger}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
eksportStandard App;

Her har vi tilføjet to nye stater kaldet er Indlæser og onEndReachedThreshold. er Indlæser holder styr på, om vi i øjeblikket henter data, og onEndReachedThreshold fyrer af onEndReached tilbagekald, når brugeren har scrollet til inden for 10 % af listens slutning.

Vi oprettede en ny funktion kaldet henteMere der kører hvornår onEndReached er fyret. Den tjekker, om vi allerede indlæser data, og hvis ikke, henter den den næste side med data og opdaterer vores liste.

Til sidst føjede vi de nye nødvendige rekvisitter til vores Flad Liste komponent. Det Flad Liste komponent vil nu dynamisk indlæse data, når brugeren ruller til slutningen af ​​listen.

Forbedre din apps ydeevne ved hjælp af tilpasset sideinddeling

Du lærte, hvordan du indlæser data dynamisk i React Native med dit eget tilpassede pagineringssystem. Denne metode giver dig mere fleksibilitet og kontrol, når du skal håndtere store mængder data i din app. Husk at skræddersy din paginering, så den matcher din apps stil og behov. Du kan tilpasse den endnu mere for at opnå det ønskede udseende og funktionalitet. Samlet set vil det helt sikkert hjælpe dig med at optimere din apps ydeevne.