So laden Sie Daten dynamisch mit benutzerdefinierter Paginierung in React Native

Jan 24, 2024

Benutzerdefinierte Paginierung mit dynamischem Datenladen kann die Leistung und das allgemeine Benutzererlebnis Ihrer App verbessern.

Unter Paginierung versteht man das System zur Aufteilung großer Datenmengen in kleinere, besser verwaltbare Teile oder Seiten, um die Leistung und Benutzerfreundlichkeit zu verbessern. Wenn eine benutzerdefinierte Paginierung richtig implementiert wird, kann sie für ein besseres Benutzererlebnis sorgen. Erfahren Sie, wie Sie in React Native eine benutzerdefinierte Paginierungslösung erstellen, mit der Sie Daten dynamisch laden können.

​​​​​​Mit der benutzerdefinierten Paginierung können Entwickler einen Paginierungsmechanismus erstellen, der den spezifischen Anforderungen ihrer Anwendung entspricht. Bei der benutzerdefinierten Paginierung kann es darum gehen, eine einzigartige Benutzeroberfläche für die Navigation zwischen Seiten zu entwerfen, Algorithmen zum Abrufen von Daten aus einer Datenbank oder API zu implementieren oder Funktionen wie unendliches Scrollen oder verzögertes Laden zu integrieren.

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

Wenn Ihre React Native-Anwendung nur die Daten lädt, die zu diesem Zeitpunkt zum Laden erforderlich sind, spricht man von dynamischem Laden. Um dynamisches Laden mit benutzerdefinierter Paginierung zu implementieren, können Sie die folgenden allgemeinen Schritte ausführen:

Der erste Schritt bei der Implementierung einer benutzerdefinierten Paginierung in React Native besteht darin, Ihre Datenquelle einzurichten. Dies beinhaltet typischerweise das Abrufen von Daten von einer API oder Datenbank und deren Speicherung in einer Zustandsvariablen. Stellen Sie sich eine einfache REST-API vor, die eine Liste von Büchern zurückgibt.

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

Um diese Daten in unserer React Native-App abzurufen, können wir die verwendenbringenFunktion, die a zurückgibtVersprechenDas wird mit der Antwort der REST-API aufgelöst.

Fahren wir mit der Erstellung einer Funktion fort, 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 werden soll.

Wir definieren diese Funktion als asynchrone Funktion, die einen Seitenparameter entgegennimmt und ein Promise zurückgibt, das mit den abgerufenen Daten aufgelöst wird.

Im Codeblock oben ist diefetchBooksFunktion dauert aSeite Parameter und gibt ein Promise zurück, das mit den Daten dieser Seite aufgelöst wird. Hier dasSEITENGRÖSSEDie Konstante wird verwendet, um die Anzahl der pro Seite abgerufenen Bücher zu begrenzen.

Nachdem Sie die benutzerdefinierte Paginierungsfunktion definiert haben, können Sie sie nun verwenden, um dynamisches Laden in der App zu implementieren. Verwenden Sie dazu dieFlatListKomponente, eine Hochleistungskomponente zum Rendern großer Datenlisten in React Native.

Richten Sie zunächst die einFlatListKomponente mit einem Anfangszustand:

Dieser Code richtet die FlatList-Komponente mit zwei Zustandsteilen ein, nämlichBücherUndaktuelle Seite . Wir benutzen dasuseEffect()Hook, um die erste Datenseite abzurufen, wenn unsere App zum ersten Mal ausgeführt wird.

Als nächstes definieren wir arenderItemFunktion, die ein Element aus dem übernimmtBücherArray und gibt a zurückSichtmit Buchtitel und Autor.

Endlich haben wir die bestandenBücherArray zumDatenStütze desFlatList, zusammen mit unseremrenderItemFunktion undkeyExtractor.

Wir müssen nun sicherstellen, dass unsere Flatlist erkennen kann, wenn ein Benutzer bis zum Ende der Liste scrollt. An diesem Punkt sollte es mit dem Abrufen, Laden und Rendern der neuen Daten fortfahren.

Dazu verwenden wir dieonEndReachedStütze zur Verfügung gestelltFlatList Dabei handelt es sich um einen Rückruf, der aufgerufen wird, wenn der Benutzer zum Ende der Liste scrollt. Wir sollten auch unsere aktualisierenaktuelle SeiteGeben Sie den Status ein, um zu verfolgen, auf welcher Seite wir uns gerade befinden.

Hier ist der aktualisierte Code, der all dies implementiert:

Hier haben wir zwei neue Staaten mit dem Namen hinzugefügtladetUndonEndReachedThreshold.ladetVerfolgt, ob wir gerade Daten abrufen, undonEndReachedThresholdfeuert dieonEndReachedRückruf, wenn der Benutzer bis auf 10 % zum Ende der Liste gescrollt hat.

Wir haben eine neue Funktion namens erstelltfetchMoredas läuft wannonEndReached wird gefeuert. Es prüft, ob wir bereits Daten laden. Wenn nicht, ruft es die nächste Datenseite ab und aktualisiert unsere Liste.

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

Sie haben gelernt, wie Sie Daten dynamisch in React Native mit Ihrem eigenen benutzerdefinierten Paginierungssystem laden. Diese Methode bietet Ihnen mehr Flexibilität und Kontrolle beim Umgang mit großen Datenmengen in Ihrer App. Denken Sie daran, die 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 dabei helfen, die Leistung Ihrer App zu optimieren.

Noble Okafor ist ein erfahrener Softwareentwickler mit über dreijähriger Erfahrung im Programmierbereich. Seine Leidenschaft gilt der Entwicklung optimierter JavaScript-, nativer und plattformübergreifender Mobil- und Web-Softwarelösungen. Er ist bestrebt, sein Wissen und seine Lektionen durch seine Fachartikel zu dokumentieren und verfügt über mehr als ein Jahr Erfahrung im Schreiben. Der Hauptschwerpunkt und das Ziel dieser Artikel besteht darin, die Komplexität rund um Software-Engineering-Themen zu vereinfachen.