Gegevens dynamisch laden met aangepaste paginering in React Native

Paginering verwijst naar het systeem van het verdelen van grote hoeveelheden gegevens in kleinere, beter beheersbare brokken of pagina's om de prestaties en bruikbaarheid te verbeteren. Aangepaste paginering kan, mits correct geïmplementeerd, een betere gebruikerservaring bieden. Leer hoe u een aangepaste pagineringsoplossing maakt in React Native waarmee u gegevens dynamisch kunt laden.

Inzicht in aangepaste paginering

Met aangepaste paginering kunnen ontwikkelaars een pagineringsmechanisme creëren dat past bij de specifieke vereisten van hun toepassing. Aangepaste paginering kan betrekking hebben op het ontwerpen van een unieke gebruikersinterface voor het navigeren tussen pagina's, het implementeren van algoritmen voor gegevens ophalen uit een database of API, of het opnemen van functies zoals oneindig scrollen of lui laden.

Voordelen van aangepaste paginering

Het creëren van een aangepast pagineringssysteem voor uw React Native mobiele apps kan enkele voordelen bieden:

• Het kan de schaalbaarheid van uw app verbeteren, waardoor deze grotere hoeveelheden gegevens efficiënter kan verwerken. Dit is vooral belangrijk voor apps die te maken hebben met grote datasets.
• Aangepaste paginering kan de prestaties van uw app verbeteren door gegevens op te splitsen in kleinere en beter beheersbare brokken. Dit zal de laadtijd verkorten.
• Met aangepaste paginering heeft u meer flexibiliteit en controle bij het presenteren en openen van gegevens binnen uw app.

Dynamisch laden implementeren met aangepaste paginering

Wanneer uw React Native-applicatie alleen de benodigde gegevens laadt die op dat moment nodig zijn, wordt dit dynamisch laden genoemd. Om dynamisch laden met aangepaste paginering te implementeren, kunt u deze algemene stappen volgen:

1. Bepaal de pagineringsmethode: Kies een pagineringsmethode die het beste werkt voor uw inhoud. Dit kan een traditionele zijn pagina-gebaseerd pagineringssysteem, waar gebruikers klikken om de volgende pagina te laden, of een oneindige scroll systeem, waar meer inhoud wordt geladen terwijl de gebruiker naar beneden scrolt op de pagina.
2. Schrijf server-side en client-side code: U schrijft server-side code om de pagineringsverzoeken voor specifieke pagina's met gegevens af te handelen en retourneert alleen de gegevens voor die pagina. Vervolgens schrijft u code aan de clientzijde om te luisteren naar gebruikersacties die verzoeken om meer gegevens activeren, zoals klikken op een Meer laden knop of scrol naar de onderkant van de pagina.
3. Implementeer het laden van gegevens: Wanneer de gebruiker een verzoek om meer gegevens activeert, moet de app een verzoek naar de serverzijde sturen voor de volgende pagina met gegevens. De serverzijde zou dan alleen de gegevens voor die pagina moeten retourneren, die de app kan gebruiken om de pagina bij te werken.
4. Werk de pagina bij: Ten slotte werkt u de pagina bij met de nieuw geladen gegevens. Dit kan inhouden dat de nieuwe gegevens worden toegevoegd aan een bestaande lijst met items of dat de hele lijst wordt vervangen door de nieuwe gegevens.

De gegevensbron instellen

De eerste stap bij het implementeren van aangepaste paginering in React Native is het instellen van uw gegevensbron. Dit omvat meestal het ophalen van gegevens uit een API of database en het opslaan ervan in een statusvariabele. Overwegen een eenvoudige REST-API dat geeft een lijst met boeken terug.

Hier is een voorbeeld van hoe de API-reactie eruit zou kunnen zien:

{
"gegevens": [
 {
"ID kaart": 1,
"titel": "De vanger in de rogge",
"auteur": "JD Salinger"
 },
 {
"ID kaart": 2,
"titel": "Om een ​​spotlijster te doden",
"auteur": "Harper Lee"
 },
// ...
 ],
"bladzijde": 1,
"totaalPagina's": 5
}

Om deze gegevens op te halen in onze React Native-app, kunnen we de ophalen functie, die a retourneert Belofte dat wordt opgelost met het antwoord van de REST API.

Een aangepaste pagineringsfunctie maken

Laten we doorgaan met het maken van een functie die de gegevens van de API ophaalt en de status bijwerkt met de nieuw ontvangen gegevens. Deze functie bepaalt wat er op het scherm van de React Native-app wordt weergegeven.

Goed definieer deze functie als een asynchrone functie dat neemt een paginaparameter en retourneert een belofte die wordt opgelost met de opgehaalde gegevens.

const PAGE_SIZE = 10;
const fetchBooks = asynchroon (pagina) => {
poging {
const reactie = wachten ophalen(` https://myapi.com/books? pagina=${pagina}&paginaSize=${PAGE_SIZE}`);
const json = wachten reactie.json();
opbrengst json.gegevens;
 } vangst (fout) {
troosten.fout (fout);
opbrengst [];
 }
}

In het codeblok hierboven, de boeken ophalen functie duurt een bladzijde parameter en retourneert een belofte die wordt opgelost met de gegevens van die pagina. Hier de PAGINA GROOTTE constant wordt gebruikt om het aantal opgehaalde boeken per pagina te beperken.

Dynamisch laden implementeren met behulp van de aangepaste pagineringsfunctie

Nu de aangepaste pagineringsfunctie is gedefinieerd, kunt u deze nu gebruiken om dynamisch laden in de app te implementeren. Gebruik hiervoor de platte lijst component, een krachtige component voor het weergeven van grote lijsten met gegevens in React Native.

Stel eerst de platte lijst component met een begintoestand:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { FlatList, weergave, tekst } van'reageren-native';
const App= () => {
const [boeken, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
 gebruikEffect(() => {
// Haal de eerste pagina met gegevens op
 fetchBooks (huidigePagina).then(gegevens => setBooks (gegevens));
 }, []);
const renderItem = ({ artikel }) => {
opbrengst (

lettertypegrootte: 18 }}>{item.titel}</Text>
lettertypegrootte: 14 }}>{item.auteur}</Text>
 </View>
 );
 };
opbrengst (
 data={boeken}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
exporterenstandaard App;

Deze code stelt de FlatList-component in met twee stukken staat, namelijk boeken En huidige pagina. Wij gebruiken de gebruikEffect() hook om de eerste pagina met gegevens op te halen wanneer onze app voor het eerst wordt uitgevoerd.

Vervolgens definiëren we a renderItem functie die een item uit de boeken array en retourneert a Weergave met de titel van het boek en de auteur.

Eindelijk zijn we de boeken reeks naar de gegevens prop van de platte lijst, samen met onze renderItem functie en keyExtractor.

We moeten er nu voor zorgen dat onze Flatlist kan detecteren wanneer een gebruiker naar het einde van de lijst scrolt. Op dat moment zou het moeten doorgaan met het ophalen en laden van de nieuwe gegevens en deze weergeven.

Hiervoor gebruiken we de onEndReached prop verstrekt aan de platte lijst, wat een callback is die wordt aangeroepen wanneer de gebruiker naar het einde van de lijst scrolt. We moeten ook onze bijwerken huidige pagina state om bij te houden op welke pagina we ons momenteel bevinden.

Hier is de bijgewerkte code die dit allemaal implementeert:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { FlatList, weergave, tekst } van'reageren-native';
const App= () => {
const [boeken, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(vals);
 gebruikEffect(() => {
 fetchBooks (huidigePagina).then(gegevens => setBooks (gegevens));
 }, []);
const ophalenMeer = asynchroon () => {
als (Laadt) opbrengst;
 setIsLaden(WAAR);
const volgendePagina = huidigePagina + 1;
const nieuweData = wachten fetchBooks (volgende pagina);
 setCurrentPage (volgendePagina);
 setIsLaden(vals);
 setBoeken(vorigeGegevens => [...prevData, ...newData]);
 };
const renderItem = ({ artikel }) => {
opbrengst (
opvulling: 16 }}>
lettertypegrootte: 18 }}>{item.titel}</Text>
lettertypegrootte: 14 }}>{item.auteur}</Text>
 </View>
 );
 };
opbrengst (
 data={boeken}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
exporterenstandaard App;

Hier hebben we twee nieuwe staten toegevoegd, genaamd Laadt En onEndReachedThreshold. Laadt houdt bij of we momenteel gegevens ophalen, en onEndReachedThreshold vuurt de onEndReached terugbellen wanneer de gebruiker binnen 10% van het einde van de lijst is gescrolld.

We hebben een nieuwe functie gemaakt met de naam halenMeer dat loopt wanneer onEndReached wordt ontslagen. Het controleert of we al gegevens aan het laden zijn, en zo niet, dan haalt het de volgende pagina met gegevens op en werkt het onze lijst bij.

Ten slotte hebben we de nieuwe noodzakelijke rekwisieten aan onze toegevoegd platte lijst bestanddeel. De platte lijst component laadt nu dynamisch gegevens terwijl de gebruiker naar het einde van de lijst scrolt.

Verbeter de prestaties van uw app met aangepaste paginering

Je hebt geleerd hoe je gegevens dynamisch kunt laden in React Native met je eigen aangepaste pagineringssysteem. Deze methode geeft u meer flexibiliteit en controle bij het omgaan met grote hoeveelheden gegevens in uw app. Vergeet niet om uw paginering af te stemmen op de stijl en behoeften van uw app. U kunt het nog verder aanpassen om de gewenste look en functionaliteit te bereiken. Over het algemeen zou het u zeker helpen om de prestaties van uw app te optimaliseren.