Træk for at opdatere og indlæs mere
Implementér onRefresh med RefreshControl, så brugere kan trække ned for at genindlæse data, og brug onEndReached til at hente den næste resultatside.
Træk for at opdatere og indlæs mere er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor trække for at opdatere?
Træk for at opdatere er en mobiltypisk gestus, hvor brugeren trækker listen nedad for at udløse en genindlæsning af data. Det signalerer til appen, at nyt indhold skal hentes fra serveren. React Natives FlatList har indbygget understøttelse af denne gestus via propperne onRefresh og refreshing.
Propperne refreshing og onRefresh
FlatLists funktion til at trække for at opdatere kræver to propper: refreshing (en boolesk værdi, der viser eller skjuler indikatoren) og onRefresh (et callback, der kører din logik til hentning af data). Sæt refreshing til true, når hentningen starter, og tilbage til false, når den er færdig.
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}
/>Brug af RefreshControl til tilpasset typografi
Hvis du vil have mere kontrol over indikatorens udseende, kan du bruge proppen refreshControl sammen med en RefreshControl-komponent. Det giver dig mulighed for at angive indikatorens tintColor (iOS) og colors (Android) og endda tilføje en tilpasset progressViewOffset til apps med faste topbjælker.
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']}
/>
}
/>Uendelig rulning med onEndReached
Uendelig rulning (indlæsning af flere elementer / sideinddeling) henter flere data, når brugeren nærmer sig bunden af listen. FlatList udløser callbacket onEndReached, når brugeren ruller inden for onEndReachedThreshold af slutningen. En tærskel på 0.5 udløser callbacket, når brugeren er halvvejs til slutningen.
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}
/>Undgå dublerede indlæsningskald
onEndReached kan blive udløst flere gange hurtigt efter hinanden, mens brugeren ruller. Beskyt mod dublerede hentninger med et loading-flag. Kontrollér flaget i begyndelsen af din indlæsningsfunktion, og returnér tidligt, hvis en hentning allerede er i gang. Nulstil flaget, når dataene er indlæst.
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);
};Footer-indikator ved indlæsning af flere elementer
Vis en ActivityIndicator i ListFooterComponent, mens den næste side indlæses. Skjul den, når alle sider er indlæst. Det giver brugerne et visuelt tegn på, at der kommer mere indhold, og forhindrer dem i gentagne gange at rulle for at forsøge at indlæse mere, når indlæsningen allerede er i gang.
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}
/>Registrering af slutningen på dataene
Gem en boolesk hasMore-værdi i state. Når din API returnerer færre elementer end sidestørrelsen, ved du, at der ikke er flere sider. Sæt hasMore til false, og beskyt funktionen loadMore med denne kontrol. Opdatér også footeren, så den viser meddelelsen 'Slut på listen' i stedet for en indikator.
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);
};Kombination af opdatering og indlæsning af flere elementer
Træk for at opdatere og indlæsning af flere elementer kan fungere sammen i den samme FlatList. Ved opdatering skal du nulstille siden til 1, rydde de eksisterende elementer, hente den første side og nulstille hasMore til true. De to forløb er uafhængige og bruger separate indlæsningstilstande, så de ikke påvirker hinanden.
const onRefresh = async () => {
setRefreshing(true);
setPage(1);
setHasMore(true);
const freshData = await fetchPage(1);
setItems(freshData);
setRefreshing(false);
};Bedste praksis for onEndReachedThreshold
Værdien for onEndReachedThreshold er en brøkdel af den synlige listehøjde, ikke en værdi i pixel. Hvis du sætter den til 0.2, starter indlæsningen, når 20 % af listens indhold stadig er synligt under skærmen. En højere værdi starter indlæsningen tidligere og passer bedre til langsommere API'er, mens en lavere værdi er bedre ved hurtige API-svar.
// Trigger load more when 20% of list remains
<FlatList
onEndReached={loadMore}
onEndReachedThreshold={0.2}
/>Rulleposition efter opdatering
Når en opdatering erstatter dataarrayet, kan FlatList bevare den gamle rulleposition, så det nye indhold ikke bliver synligt. Kald flatListRef.current.scrollToOffset({ offset: 0, animated: true }), efter du har angivet de nye data, for at føre listen tilbage til toppen og give en gennemført brugeroplevelse.
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);
};Test af træk for at opdatere i emulatoren
I iOS Simulator fungerer træk for at opdatere ved at stryge ned over listen med to fingre på et pegefelt. I Android Emulator skal du klikke på et listeelement og trække ned. På en fysisk enhed føles bevægelsen naturlig. Test altid begge platforme, fordi iOS bruger en indbygget spinner, mens Android bruger sin egen indikator i Material-stil.
Hurtigt tjek
Test din forståelse af træk for at opdatere og uendelig rulning fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du at: bruge propsene refreshing og onRefresh til at implementere træk for at opdatere, bruge onEndReached sammen med onEndReachedThreshold til uendelig rulning og beskytte loadMore med et indlæsningsflag for at forhindre duplikerede API-kald. Nu ser vi på SectionList til grupperede data med overskrifter.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Træk for at opdatere og indlæs mere” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Træk for at opdatere og indlæs mere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Træk for at opdatere og indlæs mere”?
Implementér onRefresh med RefreshControl, så brugere kan trække ned for at genindlæse data, og brug onEndReached til at hente den næste resultatside. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Træk for at opdatere og indlæs mere”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- FlatList-data, renderItem og keyExtractor
- Træk for at opdatere og indlæs mere
- SectionList med overskrifter
- Opbygning af en app med kontaktliste