Tietojen lataaminen dynaamisesti mukautetun sivutuksen avulla React Nativessa

Sivutuksella tarkoitetaan järjestelmää, jossa suuret tietomäärät jaetaan pienempiin, paremmin hallittaviin osiin tai sivuihin suorituskyvyn ja käytettävyyden parantamiseksi. Oikein toteutettu mukautettu sivutus voi tarjota paremman käyttökokemuksen. Opi luomaan mukautettu sivutusratkaisu React Nativessa, jonka avulla voit ladata tietoja dynaamisesti.

Mukautetun sivutuksen ymmärtäminen

Mukautetun sivutuksen avulla kehittäjät voivat luoda sivutusmekanismin, joka sopii heidän sovelluksensa erityisvaatimuksiin. Mukautettu sivutus voi sisältää ainutlaatuisen käyttöliittymän suunnittelun sivujen välillä liikkumista varten ja algoritmien toteuttamisen tietojen hakeminen tietokannasta tai API: statai sisältää ominaisuuksia, kuten ääretön vieritys tai laiska lataus.

Mukautetun sivutuksen edut

Mukautetun sivutusjärjestelmän luominen React Native -mobiilisovelluksille voi tarjota joitain etuja:

• Se voi parantaa sovelluksesi skaalautuvuutta, jolloin se pystyy käsittelemään suurempia tietomääriä tehokkaammin. Tämä on erityisen tärkeää sovelluksille, jotka käsittelevät suuria tietojoukkoja.
• Muokattu sivutus voi parantaa sovelluksesi suorituskykyä jakamalla tiedot pienempiin ja paremmin hallittaviin osiin. Tämä lyhentää latausaikaa.
• Mukautetun sivutuksen ansiosta sinulla on enemmän joustavuutta ja hallintaa sovelluksesi tietojen esittämisessä ja käytössä.

Dynaamisen lataamisen toteuttaminen mukautetun sivutuksen avulla

Kun React Native -sovelluksesi lataa vain tarvittavat tiedot, jotka se tarvitsee ladata, sitä kutsutaan dynaamiseksi lataamiseksi. Voit ottaa käyttöön dynaamisen lataamisen mukautetulla sivutuksella noudattamalla näitä yleisiä vaiheita:

1. Määritä sivutusmenetelmä: Valitse sisällöllesi parhaiten sopiva sivutusmenetelmä. Tämä voisi olla perinteinen sivupohjainen sivutusjärjestelmä, jossa käyttäjät napsauttavat ladatakseen seuraavan sivun, tai loputon selaaminen järjestelmä, jossa lisää sisältöä ladataan, kun käyttäjä vierittää sivua alaspäin.
2. Kirjoita palvelinpuolen ja asiakaspuolen koodi: Kirjoitat palvelinpuolen koodin, joka käsittelee tiettyjen tietosivujen sivutuspyyntöjä ja palautat vain kyseisen sivun tiedot. Kirjoitat sitten asiakaspuolen koodin kuunnellaksesi käyttäjän toimia, jotka käynnistävät lisätietopyyntöjä, kuten napsautuksen a Lataa lisää -painiketta tai vierittämällä sivun alaosaan.
3. Toteuta tietojen lataus: Kun käyttäjä käynnistää lisätietopyynnön, sovelluksen tulee lähettää palvelinpuolelle pyyntö seuraavaa datasivua varten. Palvelinpuolen tulee tällöin palauttaa vain kyseisen sivun tiedot, joita sovellus voi käyttää sivun päivittämiseen.
4. Päivitä sivu: Lopuksi päivität sivulle juuri ladatut tiedot. Tämä voi tarkoittaa uusien tietojen liittämistä olemassa olevaan kohteluetteloon tai koko luettelon korvaamista uusilla tiedoilla.

Tietolähteen määrittäminen

Ensimmäinen vaihe mukautetun sivutuksen käyttöönotossa React Nativessa on tietolähteen määrittäminen. Tämä tarkoittaa yleensä tietojen hakemista API: sta tai tietokannasta ja tallentamista tilamuuttujaan. Harkitse yksinkertainen REST API joka palauttaa luettelon kirjoista.

Tässä on esimerkki siitä, miltä API-vastaus voi näyttää:

{
"data": [
 {
"id": 1,
"titteli": "Sieppari ruispellossa",
"kirjailija": "J.D. Salinger"
 },
 {
"id": 2,
"titteli": "Tappaa pilkkaajalintu",
"kirjailija": "Harper Lee"
 },
// ...
 ],
"sivu": 1,
"sivut yhteensä": 5
}

Voimme hakea nämä tiedot React Native -sovelluksessamme hakea funktio, joka palauttaa a Lupaus joka ratkeaa REST API: n vastauksella.

Mukautetun sivutusfunktion luominen

Jatketaan funktion luomista, joka hakee tiedot API: sta ja päivittää tilan uusilla tiedoilla. Tämä toiminto päättää, mitä hahmonnetaan React Native -sovelluksen näytöllä.

Hyvin määritä tämä funktio asynkroniseksi funktioksi joka ottaa sivuparametrin ja palauttaa lupauksen, joka ratkaisee haetut tiedot.

konst PAGE_SIZE = 10;
konst fetchBooks = asynk (sivu) => {
yrittää {
konst vastaus = odottaa hae(` https://myapi.com/books? sivu =${page}&pageSize=${PAGE_SIZE}`);
konst json = odottaa vastaus.json();
palata json.data;
 } ottaa kiinni (virhe) {
konsoli.error (virhe);
palata [];
 }
}

Yllä olevassa koodilohkossa fetchBooks toiminto vie a sivu parametri ja palauttaa lupauksen, joka ratkeaa kyseisen sivun tiedoilla. Tässä, SIVUN KOKO vakiota käytetään rajoittamaan sivulla haettavien kirjojen määrää.

Dynaamisen lataamisen toteuttaminen mukautetun sivutustoiminnon avulla

Kun mukautettu sivutustoiminto on määritetty, voit nyt käyttää sitä dynaamisen lataamisen toteuttamiseen sovelluksessa. Käytä tätä varten FlatList komponentti, joka on tehokas komponentti suurten tietoluetteloiden hahmontamiseen React Nativessa.

Määritä ensin FlatList komponentti jollakin alkutilalla:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { FlatList, View, Text } alkaen'react-native';
konst Sovellus = () => {
konst [kirjat, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Hae tietojen ensimmäinen sivu
 fetchBooks (currentPage).then(tiedot => setBooks (data));
 }, []);
konst renderItem = ({ kohde }) => {
palata (

Fonttikoko: 18 }}>{item.title}</Text>
Fonttikoko: 14 }}>{item.author}</Text>
 </View>
 );
 };
palata (
 data={kirjat}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
viedäoletuksena Sovellus;

Tämä koodi määrittää FlatList-komponentin kahdella tilalla, nimittäin kirjat ja tämänhetkinen sivu. Käytämme useEffect() koukku noutaaksesi aloitussivun datasta, kun sovelluksemme suoritetaan ensimmäisen kerran.

Seuraavaksi määrittelemme a renderItem toiminto, joka ottaa kohteen kirjat taulukko ja palauttaa a Näytä sisältää kirjan nimen ja kirjoittajan.

Lopulta olemme ohittaneet kirjat joukkoon tiedot prop of FlatList, meidän kanssamme renderItem toiminto ja KeyExtractor.

Meidän on nyt varmistettava, että Flatlist-listamme voi havaita, kun käyttäjä vierittää luettelon loppuun. Siinä vaiheessa sen pitäisi jatkaa uusien tietojen hakemista ja lataamista ja hahmontamista.

Tätä varten käytämme onEndReached tarjottu tuki FlatList, joka on takaisinsoitto, kun käyttäjä vierittää luettelon loppuun. Meidän pitäisi myös päivittää tämänhetkinen sivu tilaa seurataksesi, millä sivulla olemme tällä hetkellä.

Tässä on päivitetty koodi, joka toteuttaa kaiken tämän:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { FlatList, View, Text } alkaen'react-native';
konst Sovellus = () => {
konst [kirjat, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(väärä);
 useEffect(() => {
 fetchBooks (currentPage).then(tiedot => setBooks (data));
 }, []);
konst haeLisää = asynk () => {
jos (Ladataan) palata;
 setIsLoading(totta);
konst nextPage = nykyinen sivu + 1;
konst newData = odottaa fetchBooks (seuraava sivu);
 setCurrentPage (seuraava sivu);
 setIsLoading(väärä);
 setBooks(prevData => [...prevData, ...newData]);
 };
konst renderItem = ({ kohde }) => {
palata (
pehmuste: 16 }}>
Fonttikoko: 18 }}>{item.title}</Text>
Fonttikoko: 14 }}>{item.author}</Text>
 </View>
 );
 };
palata (
 data={kirjat}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
viedäoletuksena Sovellus;

Täällä olemme lisänneet kaksi uutta tilaa nimeltä isLadataan ja onEndReachedThreshold. isLadataan seuraa, haemmeko tietoja parhaillaan, ja onEndReachedThreshold sytyttää onEndReached takaisinsoitto, kun käyttäjä on vierittänyt 10 %:n sisällä luettelon lopusta.

Loimme uuden toiminnon nimeltä hae Lisää joka juoksee kun onEndReached on potkut. Se tarkistaa, lataammeko jo tietoja, ja jos ei, se hakee seuraavan datasivun ja päivittää luettelomme.

Lopuksi lisäsimme uudet tarpeelliset rekvisiittamme FlatList komponentti. The FlatList komponentti lataa nyt tietoja dynaamisesti, kun käyttäjä vierittää luettelon loppuun.

Paranna sovelluksesi suorituskykyä mukautetun sivutuksen avulla

Opit lataamaan tietoja dynaamisesti React Nativessa omalla mukautetulla sivutusjärjestelmälläsi. Tämä menetelmä antaa sinulle enemmän joustavuutta ja hallintaa, kun käsittelet suuria tietomääriä sovelluksessasi. Muista räätälöidä sivutus vastaamaan sovelluksesi tyyliä ja tarpeita. Voit muokata sitä entisestään saadaksesi haluamasi ulkoasun ja toiminnallisuuden. Kaiken kaikkiaan se auttaisi sinua varmasti optimoimaan sovelluksesi suorituskyvyn.