Η προσαρμοσμένη σελιδοποίηση με δυναμική φόρτωση δεδομένων μπορεί να βελτιώσει την απόδοση και τη συνολική εμπειρία χρήστη της εφαρμογής σας.

Η σελιδοποίηση αναφέρεται στο σύστημα διαίρεσης μεγάλων ποσοτήτων δεδομένων σε μικρότερα, πιο διαχειρίσιμα κομμάτια ή σελίδες για τη βελτίωση της απόδοσης και της χρηστικότητας. Η προσαρμοσμένη σελιδοποίηση, εάν εφαρμοστεί σωστά, μπορεί να προσφέρει καλύτερη εμπειρία χρήστη. Μάθετε πώς να δημιουργείτε μια προσαρμοσμένη λύση σελιδοποίησης στο React Native που σας επιτρέπει να φορτώνετε δεδομένα δυναμικά.

Κατανόηση της προσαρμοσμένης σελιδοποίησης

Με την προσαρμοσμένη σελιδοποίηση, οι προγραμματιστές μπορούν να δημιουργήσουν έναν μηχανισμό σελιδοποίησης που ταιριάζει στις συγκεκριμένες απαιτήσεις της εφαρμογής τους. Η προσαρμοσμένη σελιδοποίηση μπορεί να περιλαμβάνει το σχεδιασμό μιας μοναδικής διεπαφής χρήστη για την πλοήγηση μεταξύ σελίδων, την εφαρμογή αλγορίθμων για ανάκτηση δεδομένων από βάση δεδομένων ή API, ή ενσωμάτωση λειτουργιών όπως άπειρη κύλιση ή τεμπέλης φόρτωση.

instagram viewer

Πλεονεκτήματα της προσαρμοσμένης σελιδοποίησης

Η δημιουργία ενός προσαρμοσμένου συστήματος σελιδοποίησης για τις εφαρμογές σας για κινητά React Native μπορεί να προσφέρει ορισμένα πλεονεκτήματα:

  • Μπορεί να βελτιώσει την επεκτασιμότητα της εφαρμογής σας, επιτρέποντάς της να χειρίζεται μεγαλύτερες ποσότητες δεδομένων πιο αποτελεσματικά. Αυτό είναι ιδιαίτερα σημαντικό για εφαρμογές που ασχολούνται με μεγάλα σύνολα δεδομένων.
  • Η προσαρμοσμένη σελιδοποίηση μπορεί να βελτιώσει την απόδοση της εφαρμογής σας διαιρώντας τα δεδομένα σε μικρότερα και πιο διαχειρίσιμα κομμάτια. Αυτό θα μειώσει τον χρόνο φόρτωσης.
  • Με την προσαρμοσμένη σελιδοποίηση, θα έχετε αυξημένη ευελιξία και έλεγχο στην παρουσίαση και την πρόσβαση σε δεδομένα εντός της εφαρμογής σας.

Εφαρμογή δυναμικής φόρτωσης με προσαρμοσμένη σελιδοποίηση

Όταν η εφαρμογή React Native φορτώνει μόνο τα απαραίτητα δεδομένα που χρειάζεται να φορτώσει εκείνη τη στιγμή, τότε αναφέρεται ως δυναμική φόρτωση. Για να εφαρμόσετε δυναμική φόρτωση με προσαρμοσμένη σελιδοποίηση, μπορείτε να ακολουθήσετε αυτά τα γενικά βήματα:

  1. Προσδιορίστε τη μέθοδο σελιδοποίησης: Αποφασίστε μια μέθοδο σελιδοποίησης που λειτουργεί καλύτερα για το περιεχόμενό σας. Αυτό θα μπορούσε να είναι ένα παραδοσιακό με βάση τη σελίδα σύστημα σελιδοποίησης, όπου οι χρήστες κάνουν κλικ για να φορτώσουν την επόμενη σελίδα, ή ένα άπειρη κύλιση σύστημα, όπου φορτώνεται περισσότερο περιεχόμενο καθώς ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα.
  2. Γράψτε κώδικα από την πλευρά του διακομιστή και του πελάτη: Θα γράψετε κώδικα από την πλευρά του διακομιστή για να χειριστείτε τα αιτήματα σελιδοποίησης για συγκεκριμένες σελίδες δεδομένων και να επιστρέψετε μόνο τα δεδομένα για αυτήν τη σελίδα. Στη συνέχεια, θα γράψετε κώδικα από την πλευρά του πελάτη για να ακούσετε τις ενέργειες των χρηστών που ενεργοποιούν αιτήματα για περισσότερα δεδομένα, όπως το κλικ σε ένα Φόρτωσε περισσότερα κουμπί ή κύλιση στο κάτω μέρος της σελίδας.
  3. Εφαρμόστε τη φόρτωση δεδομένων: Όταν ο χρήστης ενεργοποιεί ένα αίτημα για περισσότερα δεδομένα, η εφαρμογή θα πρέπει να στείλει ένα αίτημα στην πλευρά του διακομιστή για την επόμενη σελίδα δεδομένων. Στη συνέχεια, η πλευρά του διακομιστή θα πρέπει να επιστρέψει μόνο τα δεδομένα για αυτήν τη σελίδα, τα οποία η εφαρμογή μπορεί να χρησιμοποιήσει για την ενημέρωση της σελίδας.
  4. Ενημερώστε τη σελίδα: Τέλος, θα ενημερώσετε τη σελίδα με τα δεδομένα που φορτώθηκαν πρόσφατα. Αυτό θα μπορούσε να περιλαμβάνει την προσθήκη των νέων δεδομένων σε μια υπάρχουσα λίστα στοιχείων ή την αντικατάσταση ολόκληρης της λίστας με τα νέα δεδομένα.

Ρύθμιση της πηγής δεδομένων

Το πρώτο βήμα για την εφαρμογή προσαρμοσμένης σελιδοποίησης στο React Native είναι να ρυθμίσετε την πηγή δεδομένων σας. Αυτό συνήθως περιλαμβάνει την ανάκτηση δεδομένων από ένα API ή μια βάση δεδομένων και την αποθήκευσή τους σε μια μεταβλητή κατάστασης. Σκεφτείτε ένα απλό REST API που επιστρέφει μια λίστα βιβλίων.

Ακολουθεί ένα παράδειγμα για το πώς μπορεί να μοιάζει η απόκριση API:

{
"δεδομένα": [
 {
"ταυτότητα": 1,
"τίτλος": "The Catcher in the Rye",
"συγγραφέας": "J.D. Salinger"
 },
 {
"ταυτότητα": 2,
"τίτλος": "To Kill a Mockingbird",
"συγγραφέας": "Harper Lee"
 },
// ...
 ],
"σελίδα": 1,
"totalPages": 5
}

Για να ανακτήσουμε αυτά τα δεδομένα στην εφαρμογή React Native, μπορούμε να χρησιμοποιήσουμε το φέρω συνάρτηση, η οποία επιστρέφει α Υπόσχεση που επιλύεται με την απόκριση από το REST API.

Δημιουργία μιας προσαρμοσμένης λειτουργίας σελιδοποίησης

Ας προχωρήσουμε στη δημιουργία μιας συνάρτησης που θα ανακτά τα δεδομένα από το API και θα ενημερώνει την κατάσταση με τα δεδομένα που ελήφθησαν πρόσφατα. Αυτή η λειτουργία θα αποφασίσει τι θα αποδώσει στην οθόνη της εφαρμογής React Native.

Καλά ορίστε αυτή τη συνάρτηση ως ασύγχρονη συνάρτηση που παίρνει μια παράμετρο σελίδας και επιστρέφει μια υπόσχεση που επιλύεται με τα δεδομένα που έχουν ληφθεί.

συνθ PAGE_SIZE = 10;
συνθ fetchBooks = ασυγχρονισμός (σελίδα) => {
δοκιμάστε {
συνθ ανταπόκριση = αναμένω φέρω(` https://myapi.com/books? σελίδα=${σελίδα}&Μέγεθος σελίδας=${PAGE_SIZE}`);
συνθ json = αναμένω answer.json();
ΕΠΙΣΤΡΟΦΗ json.data;
 } σύλληψη (λάθος) {
κονσόλα.λάθος (σφάλμα);
ΕΠΙΣΤΡΟΦΗ [];
 }
}

Στο μπλοκ κώδικα παραπάνω, το fetchBooks η συνάρτηση παίρνει α σελίδα παράμετρο και επιστρέφει μια υπόσχεση που επιλύεται με τα δεδομένα από αυτήν τη σελίδα. Εδώ, το ΜΕΓΕΘΟΣ ΣΕΛΙΔΑΣ σταθερά χρησιμοποιείται για τον περιορισμό του αριθμού των βιβλίων που λαμβάνονται ανά σελίδα.

Εφαρμογή δυναμικής φόρτωσης με τη βοήθεια της συνάρτησης προσαρμοσμένης σελιδοποίησης

Με την προσαρμοσμένη λειτουργία σελιδοποίησης καθορισμένη, μπορείτε τώρα να τη χρησιμοποιήσετε για να εφαρμόσετε δυναμική φόρτωση στην εφαρμογή. Για να το κάνετε αυτό, χρησιμοποιήστε το FlatList στοιχείο, το οποίο είναι ένα στοιχείο υψηλής απόδοσης για την απόδοση μεγάλων λιστών δεδομένων στο React Native.

Πρώτα, ρυθμίστε το FlatList συστατικό με κάποια αρχική κατάσταση:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { FlatList, View, Text } από'react-native';
συνθ Εφαρμογή = () => {
συνθ [βιβλία, setBooks] = useState([]);
συνθ [currentPage, setCurrentPage] = useState(1);


 useEffect(() => {
// Λήψη αρχικής σελίδας δεδομένων
 fetchBooks (currentPage).then(δεδομένα => setBooks (δεδομένα));
 }, []);


συνθ renderItem = ({ αντικείμενο }) => {
ΕΠΙΣΤΡΟΦΗ (

μέγεθος γραμματοσειράς: 18 }}>{item.title}</Text>
μέγεθος γραμματοσειράς: 14 }}>{item.author}</Text>
 </View>
 );
 };


ΕΠΙΣΤΡΟΦΗ (
 data={βιβλία}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κώδικας ρυθμίζει το στοιχείο FlatList με δύο τμήματα κατάστασης, συγκεκριμένα βιβλία και τρέχουσα σελίδα. Χρησιμοποιούμε το useEffect() συνδέστε για να λάβετε την αρχική σελίδα δεδομένων κατά την πρώτη εκτέλεση της εφαρμογής μας.

Στη συνέχεια, ορίζουμε α renderItem συνάρτηση που παίρνει ένα στοιχείο από το βιβλία πίνακας και επιστρέφει α Θέα που περιέχει τον τίτλο του βιβλίου και τον συγγραφέα.

Επιτέλους, περάσαμε το βιβλία συστοιχία στο δεδομένα στήριγμα του FlatList, μαζί με το δικό μας renderItem λειτουργία και κλειδοεξαγωγέας.

Τώρα πρέπει να βεβαιωθούμε ότι η Flatlist μας μπορεί να ανιχνεύσει πότε ένας χρήστης κάνει κύλιση στο τέλος της λίστας. Σε εκείνο το σημείο, θα πρέπει να προχωρήσει στην ανάκτηση και φόρτωση των νέων δεδομένων και την απόδοση τους.

Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε το onEndReached στήριγμα που παρέχεται στο FlatList, η οποία είναι μια επανάκληση που καλείται όταν ο χρήστης κάνει κύλιση στο τέλος της λίστας. Θα πρέπει επίσης να ενημερώσουμε το δικό μας τρέχουσα σελίδα κατάσταση για να παρακολουθείτε τη σελίδα στην οποία βρισκόμαστε αυτήν τη στιγμή.

Εδώ είναι ο ενημερωμένος κώδικας που υλοποιεί όλα αυτά:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { FlatList, View, Text } από'react-native';
συνθ Εφαρμογή = () => {
συνθ [βιβλία, setBooks] = useState([]);
συνθ [currentPage, setCurrentPage] = useState(1);
συνθ [isLoading, setIsLoading] = useState(ψευδής);


 useEffect(() => {
 fetchBooks (currentPage).then(δεδομένα => setBooks (δεδομένα));
 }, []);


συνθ fetchMore = ασυγχρονισμός () => {
αν (είναι Φόρτωση) ΕΠΙΣΤΡΟΦΗ;


 setIsLoading(αληθής);


συνθ nextPage = τρέχουσαΣελίδα + 1;
συνθ newData = αναμένω fetchBooks (nextPage);


 setCurrentPage (επόμενη σελίδα);
 setIsLoading(ψευδής);
 setbooks(προδεδομένα => [...prevData, ...newData]);
 };


συνθ renderItem = ({ αντικείμενο }) => {
ΕΠΙΣΤΡΟΦΗ (
υλικό παραγεμίσματος: 16 }}>
μέγεθος γραμματοσειράς: 18 }}>{item.title}</Text>
μέγεθος γραμματοσειράς: 14 }}>{item.author}</Text>
 </View>
 );
 };


ΕΠΙΣΤΡΟΦΗ (
 data={βιβλία}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Εδώ έχουμε προσθέσει δύο νέες καταστάσεις που ονομάζονται είναι Φόρτωση και onEndReachedThreshold. είναι Φόρτωση παρακολουθεί εάν λαμβάνουμε δεδομένα αυτήν τη στιγμή και onEndReachedThreshold πυροδοτεί το onEndReached επανάκληση όταν ο χρήστης έχει κάνει κύλιση εντός 10% από το τέλος της λίστας.

Δημιουργήσαμε μια νέα συνάρτηση που ονομάζεται fetchMore που τρέχει όταν onEndReached απολύεται. Ελέγχει αν φορτώνουμε ήδη δεδομένα και αν όχι, ανακτά την επόμενη σελίδα δεδομένων και ενημερώνει τη λίστα μας.

Τέλος, προσθέσαμε τα νέα απαραίτητα στηρίγματα στο δικό μας FlatList συστατικό. ο FlatList Το στοιχείο θα φορτώνει τώρα δυναμικά δεδομένα καθώς ο χρήστης μετακινείται στο τέλος της λίστας.

Βελτιώστε την απόδοση της εφαρμογής σας χρησιμοποιώντας προσαρμοσμένη σελιδοποίηση

Μάθατε πώς να φορτώνετε δεδομένα δυναμικά στο React Native με το δικό σας προσαρμοσμένο σύστημα σελιδοποίησης. Αυτή η μέθοδος σάς παρέχει μεγαλύτερη ευελιξία και έλεγχο όταν αντιμετωπίζετε μεγάλες ποσότητες δεδομένων στην εφαρμογή σας. Θυμηθείτε να προσαρμόσετε τη σελιδοποίησή σας για να ταιριάζει με το στυλ και τις ανάγκες της εφαρμογής σας. Μπορείτε να το προσαρμόσετε ακόμη περισσότερο για να επιτύχετε την επιθυμητή εμφάνιση και λειτουργικότητα. Συνολικά, σίγουρα θα σας βοηθούσε να βελτιστοποιήσετε την απόδοση της εφαρμογής σας.