Cara Memuat Data Secara Dinamis Dengan Paginasi Kustom di React Native
Table of content:
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 kustom dapat melibatkan perancangan antarmuka pengguna yang unik untuk menavigasi antar halaman, mengimplementasikan algoritme untuk mengambil data dari database atau API, atau menggabungkan fitur seperti pengguliran tak terbatas atau pemuatan lambat.
Membuat sistem paginasi khusus untuk aplikasi seluler React Native Anda dapat menawarkan beberapa keuntungan:
Baca Juga:
- 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.
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:
- 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.
- 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.
- 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.
- 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. Pertimbangkan API REST sederhana yang mengembalikan daftar buku.
Berikut ini contoh tampilan respons API:
{
"data": [
{
"id": 1,
"title": "The Catcher in the Rye",
"author": "J.D. Salinger"
},
{
"id": 2,
"title": "To Kill a Mockingbird",
"author": "Harper Lee"
},
],
"page": 1,
"totalPages": 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.
Mari lanjutkan 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.
Kami akan mendefinisikan fungsi ini sebagai fungsi asinkron yang mengambil parameter halaman dan mengembalikan Promise yang diselesaikan dengan data yang diambil.
const PAGE_SIZE = 10;const fetchBooks = async (page) => {
try {
const response = await fetch(`https://myapi.com/books?page=${page}&pageSize=${PAGE_SIZE}`);
const json = await response.json();
return json.data;
} catch (error) {
console.error(error);
return [];
}
}
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.
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:
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const renderItem = ({ item }) => {
return (
<View>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
export default App;
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 dijalankan.
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 Datarbersama 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:
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const fetchMore = async () => {
if (isLoading) return;
setIsLoading(true);
const nextPage = currentPage + 1;
const newData = await fetchBooks(nextPage);
setCurrentPage(nextPage);
setIsLoading(false);
setBooks(prevData => […prevData, …newData]);
};
const renderItem = ({ item }) => {
return (
<View style={{ padding: 16 }}>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
export default App;
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.
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.
Artikel Terkait
