Cara Memuat Data Secara Dinamis Dengan Paginasi Kustom di React Native

Paginasi mengacu pada sistem membagi data dalam jumlah besar menjadi potongan atau halaman yang lebih kecil dan lebih mudah dikelola untuk meningkatkan kinerja dan kegunaan. Penomoran khusus, jika diterapkan dengan benar, dapat memberikan pengalaman pengguna yang lebih baik. Pelajari cara membuat solusi paginasi khusus di React Native yang memungkinkan Anda memuat data secara dinamis.

Memahami Paginasi Kustom

Dengan penomoran khusus, pengembang dapat membuat mekanisme penomoran yang sesuai dengan kebutuhan spesifik aplikasi mereka. Penomoran khusus dapat melibatkan perancangan antarmuka pengguna yang unik untuk menavigasi antar halaman, mengimplementasikan algoritme untuk mengambil data dari database atau API, atau menggabungkan fitur seperti infinite scrolling atau lazy loading.

Keuntungan dari Paginasi Kustom

Membuat sistem paginasi khusus untuk aplikasi seluler React Native Anda dapat menawarkan beberapa keuntungan:

• Ini dapat meningkatkan skalabilitas aplikasi Anda, memungkinkannya menangani jumlah data yang lebih besar dengan lebih efisien. Ini sangat penting untuk aplikasi yang berurusan dengan kumpulan data besar.
• Penomoran khusus dapat meningkatkan kinerja aplikasi Anda dengan membagi data menjadi bagian yang lebih kecil dan lebih mudah dikelola. Ini akan mengurangi waktu pemuatan.
• Dengan penomoran khusus, Anda akan meningkatkan fleksibilitas dan kontrol dalam menyajikan dan mengakses data dalam aplikasi Anda.

Menerapkan Pemuatan Dinamis Dengan Paginasi Kustom

Ketika aplikasi React Native Anda hanya memuat data yang diperlukan yang perlu dimuat pada saat itu, maka ini disebut sebagai pemuatan dinamis. Untuk menerapkan pemuatan dinamis dengan paginasi khusus, Anda dapat mengikuti langkah-langkah umum berikut:

1. Tentukan metode pagination: Tentukan metode paginasi yang paling cocok untuk konten Anda. Ini bisa menjadi tradisi berbasis halaman sistem pagination, di mana pengguna mengklik untuk memuat halaman berikutnya, atau gulir tak terbatas sistem, di mana lebih banyak konten dimuat saat pengguna menggulir ke bawah halaman.
2. Tulis kode sisi server dan sisi klien: Anda akan menulis kode sisi server untuk menangani permintaan pagination untuk halaman data tertentu dan hanya mengembalikan data untuk halaman itu. Anda kemudian akan menulis kode sisi klien untuk mendengarkan tindakan pengguna yang memicu permintaan lebih banyak data, seperti mengklik a Muat lebih banyak tombol atau bergulir ke bagian bawah halaman.
3. Terapkan pemuatan data: Saat pengguna memicu permintaan untuk lebih banyak data, aplikasi harus mengirimkan permintaan ke sisi server untuk halaman data berikutnya. Sisi server kemudian hanya mengembalikan data untuk halaman tersebut, yang dapat digunakan aplikasi untuk memperbarui halaman.
4. Perbarui halaman: Terakhir, Anda akan memperbarui halaman dengan data yang baru dimuat. Ini bisa melibatkan menambahkan data baru ke daftar item yang ada atau mengganti seluruh daftar dengan data baru.

Menyiapkan Sumber Data

Langkah pertama dalam mengimplementasikan custom pagination di React Native adalah menyiapkan sumber data Anda. Ini biasanya melibatkan pengambilan data dari API atau database dan menyimpannya dalam variabel status. Mempertimbangkan API REST sederhana yang mengembalikan daftar buku.

Berikut ini contoh tampilan respons API:

{
"data": [
 {
"pengenal": 1,
"judul": "Penangkap di Gandum Hitam",
"pengarang": "JD Salinger"
 },
 {
"pengenal": 2,
"judul": "Untuk membunuh mockingbird",
"pengarang": "Harper Lee"
 },
// ...
 ],
"halaman": 1,
"totalPage": 5
}

Untuk mengambil data ini di aplikasi React Native kami, kami dapat menggunakan mengambil fungsi, yang mengembalikan a Janji yang diselesaikan dengan respons dari REST API.

Membuat Fungsi Penomoran Kustom

Mari lanjutkan untuk membuat fungsi yang akan mengambil data dari API dan memperbarui status dengan data yang baru diterima. Fungsi ini akan memutuskan apa yang akan dirender di layar aplikasi React Native.

Dengan baik mendefinisikan fungsi ini sebagai fungsi async yang mengambil parameter halaman dan mengembalikan Janji yang diselesaikan dengan data yang diambil.

const HALAMAN_UKURAN = 10;
const ambilBuku = asinkron (halaman) => {
mencoba {
const tanggapan = menunggu mengambil(` https://myapi.com/books? halaman=${halaman}&ukuranhalaman=${PAGE_SIZE}`);
const json = menunggu respon.json();
kembali json.data;
 } menangkap (kesalahan) {
menghibur.error (kesalahan);
kembali [];
 }
}

Di blok kode di atas, file ambilBuku fungsi mengambil a halaman parameter dan mengembalikan Janji yang diselesaikan dengan data dari halaman itu. Di sini, UKURAN HALAMAN konstanta digunakan untuk membatasi jumlah buku yang diambil per halaman.

Menerapkan Dynamic Loading Dengan Bantuan Fungsi Custom Pagination

Dengan fungsi pagination khusus yang ditentukan, Anda sekarang dapat menggunakannya untuk mengimplementasikan pemuatan dinamis di aplikasi. Untuk melakukan ini, gunakan Daftar Datar komponen, yang merupakan komponen berkinerja tinggi untuk merender daftar besar data di React Native.

Pertama, atur Daftar Datar komponen dengan beberapa keadaan awal:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Daftar Datar, Tampilan, Teks } dari'bereaksi-asli';
const Aplikasi = () => {
const [buku, setBuku] = useState([]);
const [HalamanArus, setCurrentPage] = useState(1);
 gunakanEfek(() => {
// Ambil halaman awal data
 ambilBuku (Halaman saat ini).lalu(data => setBooks (data));
 }, []);
const renderItem = ({ barang }) => {
kembali (

ukuran huruf: 18 }}>{item.title}</Text>
ukuran huruf: 14 }}>{item.penulis}</Text>
 </View>
 );
 };
kembali (
 data={buku}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
eksporbawaan Aplikasi;

Kode ini mengatur komponen FlatList dengan dua bagian status, yaitu buku Dan halaman saat ini. Kami menggunakan useEffect() hook untuk mengambil halaman awal data saat aplikasi kita pertama kali berjalan.

Selanjutnya kita definisikan a renderItem fungsi yang mengambil item dari buku array dan mengembalikan a Melihat berisi judul buku dan penulisnya.

Akhirnya, kami telah melewati buku larik ke data penyangga dari Daftar Datar, bersama dengan kami renderItem fungsi dan keyExtractor.

Kami sekarang harus memastikan bahwa Flatlist kami dapat mendeteksi ketika pengguna menggulir ke akhir daftar. Pada saat itu, itu harus melanjutkan untuk mengambil dan memuat data baru dan merendernya.

Untuk melakukan ini, kita akan menggunakan onEndReached penyangga yang diberikan kepada Daftar Datar, yang merupakan callback yang dipanggil saat pengguna men-scroll ke akhir daftar. Kami juga harus memperbarui kami halaman saat ini negara untuk melacak halaman mana kita sedang berada.

Berikut adalah kode yang diperbarui yang mengimplementasikan semua ini:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Daftar Datar, Tampilan, Teks } dari'bereaksi-asli';
const Aplikasi = () => {
const [buku, setBuku] = useState([]);
const [HalamanArus, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(PALSU);
 gunakanEfek(() => {
 ambilBuku (Halaman saat ini).lalu(data => setBooks (data));
 }, []);
const ambilSelengkapnya = asinkron () => {
jika (memuat) kembali;
 setIsLoading(BENAR);
const nextPage = Halaman sekarang + 1;
const Data baru = menunggu ambilBuku (Halamanberikutnya);
 setCurrentPage (Halamanberikutnya);
 setIsLoading(PALSU);
 setBuku(prevData => [...prevData, ...newData]);
 };
const renderItem = ({ barang }) => {
kembali (
lapisan: 16 }}>
ukuran huruf: 18 }}>{item.title}</Text>
ukuran huruf: 14 }}>{item.penulis}</Text>
 </View>
 );
 };
kembali (
 data={buku}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
eksporbawaan Aplikasi;

Di sini kami telah menambahkan dua status baru yang disebut sedang Memuat Dan padaEndReachedThreshold. sedang Memuat melacak apakah kami sedang mengambil data, dan padaEndReachedThreshold menembakkan onEndReached panggilan balik saat pengguna menggulir ke dalam 10% dari akhir daftar.

Kami membuat fungsi baru bernama ambilSelengkapnya yang berjalan kapan onEndReached dipecat. Ia memeriksa apakah kita sudah memuat data, dan jika tidak, ia mengambil halaman berikutnya dari data dan memperbarui daftar kita.

Akhirnya, kami menambahkan alat peraga baru yang diperlukan ke Daftar Datar komponen. Itu Daftar Datar komponen sekarang akan memuat data secara dinamis saat pengguna menggulir ke akhir daftar.

Tingkatkan Performa Aplikasi Anda Menggunakan Paginasi Kustom

Anda telah mempelajari cara memuat data secara dinamis di React Native dengan sistem pagination kustom Anda sendiri. Metode ini memberi Anda lebih banyak fleksibilitas dan kontrol saat menangani data dalam jumlah besar di aplikasi Anda. Ingatlah untuk menyesuaikan paginasi agar cocok dengan gaya dan kebutuhan aplikasi Anda. Anda dapat menyesuaikannya lebih jauh untuk mendapatkan tampilan dan fungsionalitas yang diinginkan. Secara keseluruhan, ini pasti akan membantu Anda mengoptimalkan kinerja aplikasi Anda.