Tarik untuk Menyegar Semula dan Muatkan Lagi
Laksanakan onRefresh dengan RefreshControl supaya pengguna boleh menarik ke bawah untuk memuatkan semula data, dan gunakan onEndReached untuk mendapatkan halaman hasil seterusnya.
Tarik untuk Menyegar Semula dan Muatkan Lagi ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Mengapa Tarik untuk Muat Semula?
Tarik untuk muat semula ialah gerak isyarat asli mudah alih apabila pengguna menarik senarai ke bawah untuk mencetuskan pemuatan semula data. Gerak isyarat ini memberitahu aplikasi bahawa kandungan baharu perlu diperoleh daripada pelayan. FlatList React Native mempunyai sokongan terbina dalam untuk gerak isyarat ini melalui prop onRefresh dan refreshing.
Prop refreshing dan onRefresh
Tarik untuk muat semula FlatList memerlukan dua prop: refreshing (boolean yang menunjukkan atau menyembunyikan pemutar) dan onRefresh (panggilan balik yang menjalankan logik pengambilan data anda). Tetapkan refreshing kepada true apabila pengambilan bermula dan kembali kepada false apabila selesai.
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}
/>Menggunakan RefreshControl untuk Gaya Tersuai
Untuk kawalan yang lebih baik terhadap rupa pemutar, gunakan prop refreshControl bersama komponen RefreshControl. Ini membolehkan anda menetapkan tintColor pemutar (iOS) dan colors (Android), malah menambah progressViewOffset tersuai untuk aplikasi dengan pengepala tetap.
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']}
/>
}
/>Penatalan Tanpa Penghujung dengan onEndReached
Penatalan tanpa penghujung (pemuatan tambahan / penomboran) mendapatkan data tambahan apabila pengguna menghampiri bahagian bawah senarai. FlatList mencetuskan panggilan balik onEndReached apabila pengguna menatal dalam jarak onEndReachedThreshold dari penghujung. Ambang 0.5 mencetuskan panggilan balik apabila pengguna berada separuh jalan menuju penghujung.
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}
/>Menghalang Panggilan Pemuatan Berganda
onEndReached boleh dicetuskan beberapa kali berturut-turut dengan pantas semasa pengguna menatal. Halang pengambilan pendua dengan bendera pemuatan. Semak bendera itu pada permulaan fungsi pemuatan anda dan kembali lebih awal jika pengambilan sedang berlangsung. Tetapkan semula bendera selepas data dimuatkan.
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);
};Pemutar Pengaki untuk Pemuatan Tambahan
Paparkan ActivityIndicator dalam ListFooterComponent semasa halaman seterusnya sedang dimuatkan. Sembunyikannya apabila semua halaman telah dimuatkan. Ini memberikan petunjuk visual bahawa lebih banyak kandungan akan tersedia dan menghalang pengguna daripada menatal berulang kali untuk cuba memuatkan lebih banyak kandungan yang sedang dimuatkan.
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}
/>Mengesan Penghujung Data
Simpan boolean hasMore dalam keadaan. Apabila API anda mengembalikan item yang lebih sedikit daripada saiz halaman, anda tahu bahawa tiada halaman lagi. Tetapkan hasMore kepada false dan lindungi fungsi loadMore dengan semakan ini. Kemas kini pengaki juga supaya memaparkan mesej 'Penghujung senarai' dan bukannya pemutar.
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);
};Menggabungkan Muat Semula dan Pemuatan Tambahan
Tarik untuk muat semula dan pemuatan tambahan boleh digunakan bersama dalam FlatList yang sama. Semasa memuat semula, tetapkan semula halaman kepada 1, kosongkan item sedia ada, dapatkan halaman pertama dan tetapkan semula hasMore kepada true. Kedua-dua aliran ini berasingan dan menggunakan keadaan pemuatan yang berbeza supaya tidak saling mengganggu.
const onRefresh = async () => {
setRefreshing(true);
setPage(1);
setHasMore(true);
const freshData = await fetchPage(1);
setItems(freshData);
setRefreshing(false);
};Amalan Terbaik onEndReachedThreshold
Nilai onEndReachedThreshold ialah pecahan ketinggian senarai yang kelihatan, bukan nilai piksel. Menetapkannya kepada 0.2 akan mencetuskan pemuatan apabila 20% kandungan senarai masih kelihatan di bawah skrin. Nilai yang lebih tinggi memulakan pemuatan lebih awal untuk API yang lebih perlahan; nilai yang lebih rendah lebih sesuai untuk respons API yang pantas.
// Trigger load more when 20% of list remains
<FlatList
onEndReached={loadMore}
onEndReachedThreshold={0.2}
/>Kedudukan Tatal Selepas Dimuat Semula
Selepas pemuatan semula menggantikan tatasusunan data, FlatList mungkin mengekalkan kedudukan tatal yang lama, menyebabkan kandungan baharu tidak kelihatan. Panggil flatListRef.current.scrollToOffset({ offset: 0, animated: true }) selepas menetapkan data baharu untuk mengembalikan senarai ke bahagian atas demi pengalaman pengguna yang lebih kemas.
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);
};Menguji Tarik untuk Muat Semula pada Emulator
Pada Simulator iOS, tarik untuk memuat semula berfungsi dengan leretan dua jari ke bawah menggunakan pad jejak pada senarai. Pada Emulator Android, klik dan seret ke bawah dari item senarai. Pada peranti fizikal, gerak isyarat ini adalah semula jadi. Sentiasa uji kedua-dua platform kerana iOS menggunakan pemutar asli, manakala Android menggunakan penunjuk bergaya Materialnya sendiri.
Semakan Pantas
Uji pemahaman anda tentang tarik untuk memuat semula dan tatal tanpa penghujung daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari perkara berikut: gunakan prop refreshing dan onRefresh untuk melaksanakan tarik untuk memuat semula, gunakan onEndReached bersama onEndReachedThreshold untuk tatal tanpa penghujung, dan lindungi loadMore dengan penanda pemuatan untuk mengelakkan panggilan API pendua. Seterusnya, kita akan meneroka SectionList untuk data berkumpulan dengan pengepala.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Tarik untuk Menyegar Semula dan Muatkan Lagi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Tarik untuk Menyegar Semula dan Muatkan Lagi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Tarik untuk Menyegar Semula dan Muatkan Lagi”?
Laksanakan onRefresh dengan RefreshControl supaya pengguna boleh menarik ke bawah untuk memuatkan semula data, dan gunakan onEndReached untuk mendapatkan halaman hasil seterusnya. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Tarik untuk Menyegar Semula dan Muatkan Lagi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Data FlatList, renderItem dan keyExtractor
- Tarik untuk Menyegar Semula dan Muatkan Lagi
- SectionList dengan Pengepala
- Membina Aplikasi Senarai Kenalan