Niestandardowa paginacja z dynamicznym ładowaniem danych może poprawić wydajność i ogólne wrażenia użytkownika z Twojej aplikacji.

Paginacja odnosi się do systemu dzielenia dużych ilości danych na mniejsze, łatwiejsze do zarządzania fragmenty lub strony w celu poprawy wydajności i użyteczności. Niestandardowa paginacja, jeśli zostanie prawidłowo zaimplementowana, może zapewnić lepsze wrażenia użytkownika. Dowiedz się, jak stworzyć niestandardowe rozwiązanie do paginacji w React Native, które umożliwia dynamiczne ładowanie danych.

Zrozumienie niestandardowej paginacji

Dzięki niestandardowemu podziałowi na strony programiści mogą stworzyć mechanizm podziału na strony, który odpowiada specyficznym wymaganiom ich aplikacji. Niestandardowa paginacja może obejmować zaprojektowanie unikalnego interfejsu użytkownika do nawigacji między stronami, implementację algorytmów dla pobieranie danych z bazy danych lub APIlub zawiera funkcje, takie jak nieskończone przewijanie lub leniwe ładowanie.

Zalety niestandardowej paginacji

instagram viewer

Stworzenie niestandardowego systemu stronicowania dla aplikacji mobilnych React Native może przynieść pewne korzyści:

  • Może poprawić skalowalność aplikacji, umożliwiając jej wydajniejsze przetwarzanie większych ilości danych. Jest to szczególnie ważne w przypadku aplikacji obsługujących duże zbiory danych.
  • Niestandardowa paginacja może poprawić wydajność aplikacji, dzieląc dane na mniejsze i łatwiejsze do zarządzania fragmenty. Skróci to czas ładowania.
  • Dzięki niestandardowemu podziałowi na strony uzyskasz większą elastyczność i kontrolę podczas prezentowania i uzyskiwania dostępu do danych w aplikacji.

Implementacja dynamicznego ładowania z niestandardową paginacją

Gdy aplikacja React Native ładuje tylko niezbędne dane, które musi załadować w danym momencie, nazywa się to ładowaniem dynamicznym. Aby zaimplementować ładowanie dynamiczne z niestandardowym podziałem na strony, możesz wykonać następujące ogólne czynności:

  1. Określ metodę paginacji: wybierz metodę podziału na strony, która najlepiej pasuje do Twoich treści. To może być tradycja oparte na stronach system stronicowania, w którym użytkownicy klikają, aby załadować następną stronę, lub nieskończone przewijania system, w którym więcej treści jest ładowanych, gdy użytkownik przewija stronę w dół.
  2. Pisanie kodu po stronie serwera i klienta: napiszesz kod po stronie serwera, aby obsłużyć żądania stronicowania dla określonych stron danych i zwrócić tylko dane dla tej strony. Następnie napiszesz kod po stronie klienta, aby nasłuchiwać działań użytkownika, które wyzwalają żądania większej ilości danych, takie jak kliknięcie a Załaduj więcej lub przewiń do dołu strony.
  3. Zaimplementuj ładowanie danych: gdy użytkownik wyzwoli prośbę o więcej danych, aplikacja powinna wysłać żądanie do serwera o następną stronę danych. Strona serwera powinna wtedy zwrócić tylko dane dla tej strony, których aplikacja może użyć do aktualizacji strony.
  4. Zaktualizuj stronę: Na koniec zaktualizujesz stronę o nowo załadowane dane. Może to obejmować dołączenie nowych danych do istniejącej listy pozycji lub zastąpienie całej listy nowymi danymi.

Konfigurowanie źródła danych

Pierwszym krokiem we wdrażaniu niestandardowej paginacji w React Native jest skonfigurowanie źródła danych. Zwykle obejmuje to pobieranie danych z interfejsu API lub bazy danych i przechowywanie ich w zmiennej stanu. Rozważać proste API REST zwraca listę książek.

Oto przykład, jak może wyglądać odpowiedź interfejsu API:

{
"dane": [
 {
"ID": 1,
"tytuł": "Buszujący w zbożu",
"autor": „JD Salinger”
 },
 {
"ID": 2,
"tytuł": "Zabić drozda",
"autor": „Harper Lee”
 },
// ...
 ],
"strona": 1,
"wszystkie strony": 5
}

Aby pobrać te dane w naszej aplikacji React Native, możemy użyć aportować funkcja, która zwraca a Obietnica który rozwiązuje się z odpowiedzią z interfejsu API REST.

Tworzenie niestandardowej funkcji stronicowania

Przejdźmy do stworzenia funkcji, która pobierze dane z API i zaktualizuje stan o nowo otrzymane dane. Ta funkcja zdecyduje, co renderować na ekranie aplikacji React Native.

Dobrze zdefiniuj tę funkcję jako funkcję asynchroniczną która pobiera parametr strony i zwraca Obietnicę, która rozwiązuje się z pobranymi danymi.

konst ROZMIAR_STRONY = 10;
konst pobierz książki = asynchroniczny (strona) => {
próbować {
konst odpowiedź = czekać na aportować(` https://myapi.com/books? strona=${strona}&rozmiar strony=${PAGE_SIZE}`);
konst json = czekać na odpowiedź.json();
powrót json. dane;
 } złapać (błąd) {
konsola.błąd (błąd);
powrót [];
 }
}

W powyższym bloku kodu plik Pobierz książki funkcja przyjmuje a strona parametr i zwraca Obietnicę, która jest rozwiązywana z danymi z tej strony. Tutaj ROZMIAR STRONY stała służy do ograniczenia liczby książek pobieranych na stronę.

Implementacja ładowania dynamicznego za pomocą funkcji niestandardowej paginacji

Po zdefiniowaniu niestandardowej funkcji paginacji możesz teraz użyć jej do zaimplementowania dynamicznego ładowania w aplikacji. Aby to zrobić, użyj Płaska lista komponent, który jest wysokowydajnym komponentem do renderowania dużych list danych w React Native.

Najpierw skonfiguruj Płaska lista komponent z pewnym stanem początkowym:

import Reaguj, { useState, useEffect } z'reagować';
import { Płaska lista, widok, tekst } z„reaguj natywnie”;
konst Aplikacja = () => {
konst [książki, zestawKsiążek] = useState([]);
konst [bieżąca strona, ustaw bieżącą stronę] = użyjStan(1);


 użyjEfekt(() => {
// Pobierz początkową stronę danych
 fetchBooks (bieżąca strona). następnie (dane => setBooks (dane));
 }, []);


konst element renderowania = ({ przedmiot }) => {
powrót (

rozmiar czcionki: 18 }}>{tytuł.tytuł}</Text>
rozmiar czcionki: 14 }}>{item.autor}</Text>
 </View>
 );
 };


powrót (
 dane={książki}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
eksportdomyślny Aplikacja;

Ten kod konfiguruje komponent FlatList z dwoma elementami stanu, a mianowicie książki I bieżąca strona. Używamy użyjEfektu() hook, aby pobrać początkową stronę danych, gdy nasza aplikacja zostanie uruchomiona po raz pierwszy.

Następnie definiujemy a element renderowania funkcja, która pobiera element z książki tablica i zwraca a Pogląd zawierający tytuł książki i autora.

Wreszcie przeszliśmy tzw książki tablica do dane podpora Płaska lista, wraz z naszym element renderowania funkcja i Ekstraktor kluczy.

Musimy teraz upewnić się, że nasza płaska lista może wykryć, kiedy użytkownik przewinie listę do końca. W tym momencie powinien przystąpić do pobierania i ładowania nowych danych oraz renderowania ich.

W tym celu użyjemy onEndReached rekwizyt dostarczony do Płaska lista, czyli wywołanie zwrotne wywoływane, gdy użytkownik przewinie listę do końca. Powinniśmy również zaktualizować nasz bieżąca strona state, aby śledzić, na której stronie aktualnie się znajdujemy.

Oto zaktualizowany kod implementujący to wszystko:

import Reaguj, { useState, useEffect } z'reagować';
import { Płaska lista, widok, tekst } z„reaguj natywnie”;
konst Aplikacja = () => {
konst [książki, zestawKsiążek] = useState([]);
konst [bieżąca strona, ustaw bieżącą stronę] = użyjStan(1);
konst [jest ładowanie, ładowanie ustawia] = useState (FAŁSZ);


 użyjEfekt(() => {
 fetchBooks (bieżąca strona). następnie (dane => setBooks (dane));
 }, []);


konst pobierzWięcej = asynchroniczny () => {
Jeśli (ładuje się) powrót;


 ładowanie zestawu(PRAWDA);


konst następna strona = bieżąca strona + 1;
konst nowe dane = czekać na pobierz książki (następna strona);


 setCurrentPage (następna strona);
 ładowanie zestawu(FAŁSZ);
 zestawKsiążek(poprzedniDane => [...prevData, ...newData]);
 };


konst element renderowania = ({ przedmiot }) => {
powrót (
wyściółka: 16 }}>
rozmiar czcionki: 18 }}>{tytuł.tytuł}</Text>
rozmiar czcionki: 14 }}>{item.autor}</Text>
 </View>
 );
 };


powrót (
 dane={książki}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={pobierzWięcej}
 onEndReachedThreshold={0.1}
 />
 );
}
eksportdomyślny Aplikacja;

Tutaj dodaliśmy dwa nowe stany tzw ładuje się I onEndReachedThreshold. ładuje się śledzi, czy aktualnie pobieramy dane, i onEndReachedThreshold zapala onEndReached wywołanie zwrotne, gdy użytkownik przewinął do 10% końca listy.

Stworzyliśmy nową funkcję o nazwie przynieśWięcej to działa, kiedy onEndReached jest zwolniony. Sprawdza, czy już ładujemy dane, a jeśli nie, pobiera kolejną stronę danych i aktualizuje naszą listę.

Na koniec dodaliśmy nowe niezbędne rekwizyty do naszego Płaska lista część. The Płaska lista będzie teraz dynamicznie ładować dane, gdy użytkownik przewinie listę do końca.

Popraw wydajność swojej aplikacji za pomocą niestandardowego podziału na strony

Nauczyłeś się, jak dynamicznie ładować dane w React Native z własnym, niestandardowym systemem stronicowania. Ta metoda zapewnia większą elastyczność i kontrolę w przypadku dużych ilości danych w aplikacji. Pamiętaj, aby dostosować paginację do stylu i potrzeb Twojej aplikacji. Możesz go jeszcze bardziej dostosować, aby uzyskać pożądany wygląd i funkcjonalność. Ogólnie rzecz biorąc, zdecydowanie pomogłoby to zoptymalizować wydajność aplikacji.