So laden Sie Daten dynamisch mit benutzerdefinierter Paginierung in React Native

Paginierung bezieht sich auf das System, bei dem große Datenmengen in kleinere, besser zu verwaltende Blöcke oder Seiten aufgeteilt werden, um die Leistung und Benutzerfreundlichkeit zu verbessern. Benutzerdefinierte Paginierung kann bei richtiger Implementierung eine bessere Benutzererfahrung bieten. Erfahren Sie, wie Sie in React Native eine benutzerdefinierte Paginierungslösung erstellen, mit der Sie Daten dynamisch laden können.

Verständnis der benutzerdefinierten Paginierung

Mit benutzerdefinierter Paginierung können Entwickler einen Paginierungsmechanismus erstellen, der den spezifischen Anforderungen ihrer Anwendung entspricht. Benutzerdefinierte Paginierung kann das Entwerfen einer einzigartigen Benutzeroberfläche zum Navigieren zwischen Seiten und das Implementieren von Algorithmen für Abrufen von Daten aus einer Datenbank oder API, oder Funktionen wie unendliches Scrollen oder verzögertes Laden integrieren.

Vorteile der benutzerdefinierten Paginierung

Das Erstellen eines benutzerdefinierten Paginierungssystems für Ihre mobilen React Native-Apps kann einige Vorteile bieten:

• Es kann die Skalierbarkeit Ihrer App verbessern, sodass größere Datenmengen effizienter verarbeitet werden können. Dies ist besonders wichtig für Apps, die mit großen Datensätzen umgehen.
• Benutzerdefinierte Paginierung kann die Leistung Ihrer App verbessern, indem Daten in kleinere und besser zu verwaltende Blöcke aufgeteilt werden. Dadurch wird die Ladezeit verkürzt.
• Mit benutzerdefinierter Paginierung haben Sie mehr Flexibilität und Kontrolle bei der Darstellung und dem Zugriff auf Daten in Ihrer App.

Implementieren von dynamischem Laden mit benutzerdefinierter Paginierung

Wenn Ihre React Native-Anwendung nur die notwendigen Daten lädt, die sie zu diesem Zeitpunkt laden muss, wird dies als dynamisches Laden bezeichnet. Um das dynamische Laden mit benutzerdefinierter Paginierung zu implementieren, können Sie die folgenden allgemeinen Schritte ausführen:

1. Bestimmen Sie die Paginierungsmethode: Entscheiden Sie sich für eine Paginierungsmethode, die für Ihre Inhalte am besten geeignet ist. Dies könnte ein traditionelles sein seitenbasiert Paginierungssystem, bei dem Benutzer klicken, um die nächste Seite zu laden, oder ein endlos scrollen System, bei dem mehr Inhalt geladen wird, wenn der Benutzer die Seite nach unten scrollt.
2. Schreiben Sie serverseitigen und clientseitigen Code: Sie schreiben serverseitigen Code, um die Paginierungsanforderungen für bestimmte Datenseiten zu verarbeiten und nur die Daten für diese Seite zurückzugeben. Anschließend schreiben Sie clientseitigen Code, um auf Benutzeraktionen zu warten, die Anfragen nach weiteren Daten auslösen, wie z. B. das Klicken auf a Mehr laden Schaltfläche oder zum Ende der Seite scrollen.
3. Implementieren Sie das Laden der Daten: Wenn der Benutzer eine Anforderung für weitere Daten auslöst, sollte die App eine Anforderung für die nächste Datenseite an die Serverseite senden. Die Serverseite sollte dann nur die Daten für diese Seite zurückgeben, die die App verwenden kann, um die Seite zu aktualisieren.
4. Aktualisieren Sie die Seite: Abschließend aktualisieren Sie die Seite mit den neu geladenen Daten. Dies könnte das Anhängen der neuen Daten an eine vorhandene Liste von Elementen oder das Ersetzen der gesamten Liste durch die neuen Daten beinhalten.

Einrichten der Datenquelle

Der erste Schritt bei der Implementierung einer benutzerdefinierten Paginierung in React Native ist die Einrichtung Ihrer Datenquelle. Dies beinhaltet typischerweise das Abrufen von Daten aus einer API oder Datenbank und das Speichern in einer Zustandsvariablen. In Betracht ziehen eine einfache REST-API die eine Liste von Büchern zurückgibt.

Hier ist ein Beispiel dafür, wie die API-Antwort aussehen könnte:

{
"Daten": [
 {
"Ausweis": 1,
"Titel": "Der Fänger im Roggen",
"Autor": "JD Salinger"
 },
 {
"Ausweis": 2,
"Titel": "Um eine Spottdrossel zu töten",
"Autor": "Harper Lee"
 },
// ...
 ],
"Buchseite": 1,
"Alle Seiten": 5
}

Um diese Daten in unserer React Native-App abzurufen, können wir die verwenden bringen Funktion, die a zurückgibt Versprechen die mit der Antwort von der REST-API aufgelöst wird.

Erstellen einer benutzerdefinierten Paginierungsfunktion

Lassen Sie uns damit fortfahren, eine Funktion zu erstellen, die die Daten von der API abruft und den Status mit den neu empfangenen Daten aktualisiert. Diese Funktion entscheidet, was auf dem Bildschirm der React Native App gerendert wird.

Also Definieren Sie diese Funktion als asynchrone Funktion das nimmt einen Seitenparameter und gibt ein Promise zurück, das mit den abgerufenen Daten aufgelöst wird.

konst PAGE_SIZE = 10;
konst fetchBooks = asynchron (Seite) => {
versuchen {
konst Antwort = erwarten bringen(` https://myapi.com/books? Seite=${Seite}&pageSize=${PAGE_SIZE}`);
konst json = erwarten Antwort.json();
zurückkehren json.data;
 } fangen (Fehler) {
Konsole.error (Fehler);
zurückkehren [];
 }
}

Im obigen Codeblock ist die Bücher abrufen Funktion dauert a Buchseite -Parameter und gibt ein Promise zurück, das mit den Daten von dieser Seite aufgelöst wird. Hier das SEITENGRÖSSE Die Konstante wird verwendet, um die Anzahl der pro Seite abgerufenen Bücher zu begrenzen.

Implementieren des dynamischen Ladens mit Hilfe der benutzerdefinierten Paginierungsfunktion

Wenn die benutzerdefinierte Paginierungsfunktion definiert ist, können Sie sie jetzt verwenden, um dynamisches Laden in der App zu implementieren. Verwenden Sie dazu die FlatList -Komponente, die eine Hochleistungskomponente zum Rendern großer Datenlisten in React Native ist.

Richten Sie zuerst die ein FlatList Komponente mit einem Anfangszustand:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { FlatList, Ansicht, Text } aus'reaktionsnativ';
konst Anwendung = () => {
konst [Bücher, SetBücher] = useState([]);
konst [aktuelleSeite, setAktuelleSeite] = useState(1);
 useEffect(() => {
// Anfangsseite mit Daten abrufen
 fetchBooks (aktuelleSeite).then(Daten => setBooks (Daten));
 }, []);
konst renderItem = ({ Artikel }) => {
zurückkehren (

Schriftgröße: 18 }}>{Artikel.Titel}</Text>
Schriftgröße: 14 }}>{Artikel.Autor}</Text>
 </View>
 );
 };
zurückkehren (
 data={Bücher}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
ExportStandard Anwendung;

Dieser Code richtet die FlatList-Komponente mit zwei Statusteilen ein, nämlich Bücher Und aktuelle Seite. Wir benutzen das useEffect() Hook, um die erste Datenseite abzurufen, wenn unsere App zum ersten Mal ausgeführt wird.

Als nächstes definieren wir a renderItem Funktion, die ein Element aus der nimmt Bücher Array und gibt a zurück Sicht mit Buchtitel und Autor.

Endlich haben wir die bestanden Bücher Array zum Daten Stütze der FlatList, zusammen mit unserem renderItem Funktion u keyExtractor.

Wir müssen nun sicherstellen, dass unsere Flatlist erkennen kann, wenn ein Benutzer zum Ende der Liste scrollt. An diesem Punkt sollte es fortfahren, die neuen Daten abzurufen und zu laden und sie zu rendern.

Dazu verwenden wir die onEndReached Prop zur Verfügung gestellt FlatList, bei dem es sich um einen Rückruf handelt, der aufgerufen wird, wenn der Benutzer zum Ende der Liste blättert. Wir sollten auch unsere aktualisieren aktuelle Seite Status, um zu verfolgen, auf welcher Seite wir uns gerade befinden.

Hier ist der aktualisierte Code, der all dies implementiert:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { FlatList, Ansicht, Text } aus'reaktionsnativ';
konst Anwendung = () => {
konst [Bücher, SetBücher] = useState([]);
konst [aktuelleSeite, setAktuelleSeite] = useState(1);
konst [isLoading, setIsLoading] = useState(FALSCH);
 useEffect(() => {
 fetchBooks (aktuelleSeite).then(Daten => setBooks (Daten));
 }, []);
konst fetchMore = asynchron () => {
Wenn (ladet) zurückkehren;
 setIsLoading(WAHR);
konst nächsteSeite = aktuelleSeite + 1;
konst neueDaten = erwarten fetchBooks (nächste Seite);
 setAktuelleSeite (nächsteSeite);
 setIsLoading(FALSCH);
 setBooks(vorherigeDaten => [...vorherigeDaten, ...neueDaten]);
 };
konst renderItem = ({ Artikel }) => {
zurückkehren (
Polsterung: 16 }}>
Schriftgröße: 18 }}>{Artikel.Titel}</Text>
Schriftgröße: 14 }}>{Artikel.Autor}</Text>
 </View>
 );
 };
zurückkehren (
 data={Bücher}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
ExportStandard Anwendung;

Hier haben wir zwei neue Staaten namens hinzugefügt ladet Und onEndReachedThreshold. ladet verfolgt, ob wir gerade Daten abrufen, und onEndReachedThreshold feuert die onEndReached Rückruf, wenn der Benutzer bis auf 10 % des Endes der Liste gescrollt hat.

Wir haben eine neue Funktion namens erstellt holenMehr das läuft wann onEndReached wird gefeuert. Es prüft, ob wir bereits Daten laden, und wenn nicht, ruft es die nächste Seite mit Daten ab und aktualisiert unsere Liste.

Schließlich haben wir die neuen notwendigen Requisiten zu unserem hinzugefügt FlatList Komponente. Der FlatList Die Komponente lädt nun dynamisch Daten, wenn der Benutzer zum Ende der Liste scrollt.

Verbessern Sie die Leistung Ihrer App mit benutzerdefinierter Paginierung

Sie haben gelernt, wie Sie Daten dynamisch in React Native mit Ihrem eigenen benutzerdefinierten Paginierungssystem laden. Diese Methode gibt Ihnen mehr Flexibilität und Kontrolle beim Umgang mit großen Datenmengen in Ihrer App. Denken Sie daran, Ihre Paginierung an den Stil und die Anforderungen Ihrer App anzupassen. Sie können es noch weiter anpassen, um das gewünschte Aussehen und die gewünschte Funktionalität zu erreichen. Insgesamt würde es Ihnen definitiv helfen, die Leistung Ihrer App zu optimieren.