Tilpasset paginering med dynamisk datainnlasting kan forbedre ytelsen og den generelle brukeropplevelsen til appen din.
Paginering refererer til systemet for å dele store mengder data i mindre, mer håndterbare biter eller sider for å forbedre ytelsen og brukervennligheten. Tilpasset paginering, hvis implementert på riktig måte, kan gi en bedre brukeropplevelse. Lær hvordan du lager en tilpasset pagineringsløsning i React Native som lar deg laste inn data dynamisk.
Forstå egendefinert paginering
Med tilpasset paginering kan utviklere lage en pagineringsmekanisme som passer de spesifikke kravene til applikasjonen deres. Tilpasset paginering kan innebære å designe et unikt brukergrensesnitt for å navigere mellom sider, implementere algoritmer for hente data fra en database eller API, eller inkorporerer funksjoner som uendelig rulling eller lat lasting.
Fordeler med tilpasset paginering
Å lage et tilpasset pagineringssystem for React Native-mobilappene dine kan gi noen fordeler:
- Det kan forbedre appens skalerbarhet, slik at den kan håndtere større datamengder mer effektivt. Dette er spesielt viktig for apper som omhandler store datasett.
- Tilpasset paginering kan forbedre ytelsen til appen din ved å dele inn data i mindre og mer håndterbare biter. Dette vil redusere lastetiden.
- Med tilpasset paginering vil du ha økt fleksibilitet og kontroll med å presentere og få tilgang til data i appen din.
Implementering av dynamisk lasting med tilpasset paginering
Når React Native-applikasjonen din bare laster inn de nødvendige dataene den trenger å laste på det tidspunktet, blir det referert til som dynamisk lasting. For å implementere dynamisk lasting med tilpasset paginering, kan du følge disse generelle trinnene:
- Bestem pagineringsmetoden: Bestem deg for en pagineringsmetode som fungerer best for innholdet ditt. Dette kan være en tradisjonell sidebasert pagineringssystem, der brukere klikker for å laste neste side, eller en uendelig rulling system, hvor mer innhold lastes inn når brukeren ruller nedover siden.
- Skriv kode på serversiden og klientsiden: Du vil skrive kode på serversiden for å håndtere pagineringsforespørsler for spesifikke sider med data og returnere bare dataene for den siden. Du vil da skrive kode på klientsiden for å lytte etter brukerhandlinger som utløser forespørsler om mer data, som å klikke på en Last mer knappen eller bla til bunnen av siden.
- Implementer datainnlastingen: Når brukeren utløser en forespørsel om mer data, skal appen sende en forespørsel til serversiden om neste side med data. Serversiden skal da bare returnere dataene for den siden, som appen kan bruke til å oppdatere siden.
- Oppdater siden: Til slutt vil du oppdatere siden med de nylig innlastede dataene. Dette kan innebære å legge de nye dataene til en eksisterende liste over elementer eller erstatte hele listen med de nye dataene.
Sette opp datakilden
Det første trinnet i å implementere tilpasset paginering i React Native er å sette opp datakilden din. Dette innebærer vanligvis å hente data fra en API eller database og lagre dem i en tilstandsvariabel. Ta i betraktning et enkelt REST API som returnerer en liste over bøker.
Her er et eksempel på hvordan API-responsen kan se ut:
{
"data": [
{
"id": 1,
"tittel": "Redderen i rugen",
"forfatter": "J.D. Salinger"
},
{
"id": 2,
"tittel": "Å drepe en sangfugl",
"forfatter": "Harper Lee"
},
// ...
],
"side": 1,
"totalPages": 5
}
For å hente disse dataene i vår React Native-app kan vi bruke hente funksjon, som returnerer en Love som løser seg med svaret fra REST API.
Opprette en egendefinert pagineringsfunksjon
La oss fortsette med å lage en funksjon som henter dataene fra API og oppdaterer tilstanden med de nylig mottatte dataene. Denne funksjonen bestemmer hva som skal gjengis på skjermen til React Native-appen.
Vi vil definer denne funksjonen som en asynkronfunksjon som tar en sideparameter og returnerer et løfte som løses med de hentede dataene.
konst PAGE_SIZE = 10;
konst hentebøker = asynkron (side) => {
prøve {
konst svar = avvente hente(` https://myapi.com/books? side=${page}&sidestørrelse=${PAGE_SIZE}`);
konst json = avvente response.json();
komme tilbake json.data;
} å fange (feil) {
konsoll.feil (feil);
komme tilbake [];
}
}
I kodeblokken ovenfor vises hentebøker funksjonen tar en side parameter og returnerer et løfte som løses med dataene fra den siden. Her, den SIDESTØRRELSE konstant brukes til å begrense antall bøker som hentes per side.
Implementering av dynamisk lasting ved hjelp av den tilpassede pagineringsfunksjonen
Med den tilpassede pagineringsfunksjonen definert, kan du nå bruke den til å implementere dynamisk lasting i appen. For å gjøre dette, bruk Flat List komponent, som er en høyytelseskomponent for å gjengi store lister med data i React Native.
Først setter du opp Flat List komponent med en eller annen starttilstand:
import Reager, { useState, useEffect } fra'reagere';
import { FlatList, View, Text } fra'reager-innfødt';konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);useEffect(() => {
// Hent den første siden med data
hentebøker (currentPage).then(data => setBooks (data));
}, []);konst renderItem = ({ element }) => {
komme tilbake (skriftstørrelse: 18 }}>{item.title}</Text> skriftstørrelse: 14 }}>{item.author}</Text>
</View>
);
};komme tilbake (
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
eksportmisligholde App;
Denne koden setter opp FlatList-komponenten med to deler av staten, nemlig bøker og nåværende side. Vi bruker useEffect() koble til for å hente den første siden med data når appen vår først kjøres.
Deretter definerer vi a renderItem funksjon som tar et element fra bøker array og returnerer en Utsikt som inneholder boktittel og forfatter.
Endelig har vi bestått bøker rekke til data rekvisitt av Flat List, sammen med vår renderItem funksjon og keyExtractor.
Vi må nå sørge for at flatlisten vår kan oppdage når en bruker ruller til slutten av listen. På det tidspunktet bør det fortsette å hente og laste de nye dataene og gjengi dem.
For å gjøre dette bruker vi onEndReached rekvisitt gitt til Flat List, som er en tilbakeringing som kalles når brukeren ruller til slutten av listen. Vi bør også oppdatere vår nåværende side stat for å holde styr på hvilken side vi er på for øyeblikket.
Her er den oppdaterte koden som implementerer alt dette:
import Reager, { useState, useEffect } fra'reagere';
import { FlatList, View, Text } fra'reager-innfødt';konst App = () => {
konst [books, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(falsk);useEffect(() => {
hentebøker (currentPage).then(data => setBooks (data));
}, []);konst henteMer = asynkron () => {
hvis (laster) komme tilbake;setIsLoading(ekte);
konst neste side = gjeldende side + 1;
konst newData = avvente hentebøker (neste side);setCurrentPage (nestePage);
setIsLoading(falsk);
setBooks(prevData => [...prevData, ...newData]);
};konst renderItem = ({ element }) => {
komme tilbake (polstring: 16 }}> skriftstørrelse: 18 }}>{item.title}</Text> skriftstørrelse: 14 }}>{item.author}</Text>
</View>
);
};komme tilbake (
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
eksportmisligholde App;
Her har vi lagt til to nye stater kalt er Laster og onEndReachedThreshold. er Laster holder styr på om vi for øyeblikket henter data, og onEndReachedThreshold fyrer av onEndReached tilbakeringing når brukeren har rullet til innenfor 10 % av slutten av listen.
Vi opprettet en ny funksjon kalt hente Mer som går når onEndReached er sparket. Den sjekker om vi allerede laster inn data, og hvis ikke, henter den neste side med data og oppdaterer listen vår.
Til slutt la vi til de nye nødvendige rekvisittene våre Flat List komponent. De Flat List komponenten vil nå dynamisk laste data når brukeren ruller til slutten av listen.
Forbedre appens ytelse ved å bruke tilpasset paginering
Du lærte hvordan du laster data dynamisk i React Native med ditt eget tilpassede pagineringssystem. Denne metoden gir deg mer fleksibilitet og kontroll når du håndterer store datamengder i appen din. Husk å skreddersy pagineringen for å matche appens stil og behov. Du kan tilpasse den enda mer for å oppnå ønsket utseende og funksjonalitet. Totalt sett vil det definitivt hjelpe deg med å optimalisere appens ytelse.
