Vetämällä päivittäminen ja lisää lataaminen
Toteuttakaa onRefresh RefreshControlilla, jotta käyttäjät voivat vetää näkymää alaspäin datan lataamiseksi uudelleen, ja käyttäkää onEndReachedia tulosten seuraavan sivun hakemiseen.
Vetämällä päivittäminen ja lisää lataaminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Miksi alasvetopäivitys?
Alasvetopäivitys on mobiililaitteille luontainen ele, jossa käyttäjä vetää luetteloa alaspäin käynnistääkseen tietojen uudelleenlatauksen. Se ilmoittaa sovellukselle, että palvelimelta tulee hakea uutta sisältöä. React Nativen FlatList tukee tätä elettä sisäänrakennetusti onRefresh- ja refreshing-propsien avulla.
refreshing- ja onRefresh-propsit
FlatListin alasvetopäivitys tarvitsee kaksi propsia: refreshing (totuusarvo, joka näyttää tai piilottaa latausilmaisimen) ja onRefresh (takaisinkutsufunktio, joka suorittaa tietojen hakulogiikan). Aseta refreshing-arvoksi true, kun haku alkaa, ja takaisin arvoksi false, kun se valmistuu.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = async () => {
setRefreshing(true);
await fetchData();
setRefreshing(false);
};
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
refreshing={refreshing}
onRefresh={onRefresh}
/>RefreshControl-komponentin käyttäminen mukautettuun tyylittelyyn
Jos haluat hallita latausilmaisimen ulkoasua tarkemmin, käytä refreshControl-propsia yhdessä RefreshControl-komponentin kanssa. Näin voit määrittää ilmaisimen tintColor-värin (iOS) ja colors-värit (Android) sekä lisätä mukautetun progressViewOffset-siirtymän sovelluksiin, joissa on kiinteät otsakkeet.
import { RefreshControl } from 'react-native';
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor='#6200ee'
colors={['#6200ee', '#03dac5']}
/>
}
/>Loputon vieritys onEndReached-toiminnolla
Loputon vieritys (lisää lataaminen / sivutus) hakee lisää tietoja, kun käyttäjä lähestyy luettelon loppua. FlatList kutsuu onEndReached-takaisinkutsua, kun käyttäjä vierittää onEndReachedThreshold-arvon määrittämälle etäisyydelle lopusta. Arvo 0.5 käynnistää takaisinkutsun, kun käyttäjä on puolivälissä loppua kohti.
const [page, setPage] = useState(1);
const [items, setItems] = useState([]);
const loadMore = async () => {
const newItems = await fetchPage(page + 1);
setItems(prev => [...prev, ...newItems]);
setPage(prev => prev + 1);
};
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onEndReached={loadMore}
onEndReachedThreshold={0.5}
/>Kaksoislatauskutsujen estäminen
onEndReached voi käynnistyä useita kertoja nopeasti peräkkäin käyttäjän vierittäessä. Estä päällekkäiset haut loading-lipulla. Tarkista lippu latausfunktion alussa ja poistu heti, jos haku on jo käynnissä. Nollaa lippu, kun tiedot on ladattu.
const [loadingMore, setLoadingMore] = useState(false);
const loadMore = async () => {
if (loadingMore) return; // guard against duplicates
setLoadingMore(true);
const newItems = await fetchPage(page + 1);
setItems(prev => [...prev, ...newItems]);
setPage(prev => prev + 1);
setLoadingMore(false);
};Alatunnisteen latausilmaisin lisäkohteiden lataamista varten
Näytä ActivityIndicator ListFooterComponent-komponentissa, kun seuraavaa sivua ladataan. Piilota se, kun kaikki sivut on ladattu. Näin käyttäjät näkevät, että lisää sisältöä on tulossa, eivätkä he yritä vierittää toistuvasti lisäkohteiden lataamiseksi, vaikka lataus on jo käynnissä.
const renderFooter = () => {
if (!loadingMore) return null;
return <ActivityIndicator style={{ padding: 16 }} />;
};
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onEndReached={loadMore}
onEndReachedThreshold={0.5}
ListFooterComponent={renderFooter}
/>Tietojen loppumisen havaitseminen
Pidä hasMore-totuusarvo tilassa. Kun API palauttaa sivukokoa vähemmän kohteita, tiedät, ettei sivuja ole enää lisää. Aseta hasMore-arvoksi false ja suojaa loadMore-funktio tällä tarkistuksella. Päivitä myös alatunniste näyttämään spinnerin sijaan viesti 'Luettelon loppu'.
const [hasMore, setHasMore] = useState(true);
const loadMore = async () => {
if (loadingMore || !hasMore) return;
setLoadingMore(true);
const newItems = await fetchPage(page + 1);
if (newItems.length < PAGE_SIZE) setHasMore(false);
setItems(prev => [...prev, ...newItems]);
setPage(prev => prev + 1);
setLoadingMore(false);
};Päivityksen ja lisäkohteiden lataamisen yhdistäminen
Alasvetopäivitys ja lisäkohteiden lataaminen voivat toimia samassa FlatListissä. Nollaa päivityksen yhteydessä sivu arvoon 1, tyhjennä nykyiset kohteet, hae ensimmäinen sivu ja palauta hasMore-arvoksi true. Toiminnot ovat toisistaan riippumattomia ja käyttävät erillisiä lataustiloja, joten ne eivät häiritse toisiaan.
const onRefresh = async () => {
setRefreshing(true);
setPage(1);
setHasMore(true);
const freshData = await fetchPage(1);
setItems(freshData);
setRefreshing(false);
};onEndReachedThreshold-käytännöt
onEndReachedThreshold-arvo on näkyvän luettelon korkeuden murto-osa, ei pikseliarvo. Kun arvoksi asetetaan 0.2, lataus käynnistyy, kun näytön alapuolella on näkyvissä enää 20 % luettelon sisällöstä. Suurempi arvo käynnistää latauksen aiemmin hitaampia rajapintoja varten; pienempi arvo sopii paremmin nopeasti vastaaville rajapinnoille.
// Trigger load more when 20% of list remains
<FlatList
onEndReached={loadMore}
onEndReachedThreshold={0.2}
/>Vierityssijainti päivityksen jälkeen
Kun päivitys korvaa data-taulukon, FlatList saattaa säilyttää vanhan vierityssijainnin, jolloin uusi sisältö ei näy. Kutsukaa flatListRef.current.scrollToOffset({ offset: 0, animated: true }) tuoreen datan asettamisen jälkeen, jotta luettelo siirtyy takaisin alkuun ja käyttökokemus pysyy viimeisteltynä.
const flatListRef = useRef(null);
const onRefresh = async () => {
setRefreshing(true);
const freshData = await fetchPage(1);
setItems(freshData);
flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
setRefreshing(false);
};Vetämällä päivityksen testaaminen emulaattorissa
iOS Simulatorissa vetämällä päivitettävä toiminto onnistuu pyyhkäisemällä luetteloa alaspäin ohjauslevyllä kahdella sormella. Android Emulatorissa napsauttakaa luettelokohdetta ja vetäkää alaspäin. Fyysisellä laitteella ele on luonnollinen. Testatkaa aina molemmat alustat, koska iOS käyttää natiivista latausilmaisinta ja Android omaa Material-tyylistä ilmaisintaan.
Pikatarkistus
Testatkaa tässä oppitunnissa oppimanne vetämällä päivitys ja loputon vieritys.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte seuraavat asiat: toteuttakaa vetämällä päivitys refreshing- ja onRefresh-propsien avulla, käyttäkää onEndReached- ja onEndReachedThreshold-propseja loputtomaan vieritykseen ja suojatkaa loadMore latauslipulla päällekkäisten rajapintakutsujen estämiseksi. Seuraavaksi tutustumme SectionList-komponenttiin ryhmiteltyä dataa ja otsikoita varten.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Vetämällä päivittäminen ja lisää lataaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Vetämällä päivittäminen ja lisää lataaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Vetämällä päivittäminen ja lisää lataaminen”?
Toteuttakaa onRefresh RefreshControlilla, jotta käyttäjät voivat vetää näkymää alaspäin datan lataamiseksi uudelleen, ja käyttäkää onEndReachedia tulosten seuraavan sivun hakemiseen. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Vetämällä päivittäminen ja lisää lataaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- FlatListin data, renderItem ja keyExtractor
- Vetämällä päivittäminen ja lisää lataaminen
- SectionList otsikoineen
- Yhteystietolistaa käyttävän sovelluksen rakentaminen