react native big list

Jika proyek ini telah membantu Anda, tolong dukung kami dengan bintang?

Dokumentasi

Keterangan

Apa ini?

Ini adalah tampilan daftar kinerja tinggi untuk React Native dengan dukungan untuk tata letak kompleks menggunakan penggunaan flatlist serupa untuk memudahkan penggantian. Implementasi daftar ini untuk rendering daftar besar pada React Native Works dengan pendaur ulang yang berfokus pada kinerja dan penggunaan memori dan karenanya memungkinkan memproses ribuan item dalam daftar.

Anda juga dapat mencobanya di aplikasi web yang diterbitkan: Demo

Mengapa Perpustakaan Daftar Lain?

React Native's Flatlist sangat bagus tetapi ketika datang ke daftar besar ia memiliki beberapa kekurangan karena caching item. Ada beberapa alternatif seperti react-native-largelist dan recyclerlistview tetapi keduanya memiliki beberapa masalah.

react-native-largelist tidak kompatibel dengan Web dan Expo, memiliki kode asli yang kadang-kadang perlu disesuaikan dan dipelihara, memiliki daftar ulang item daftar aneh (karena tidak pernah memiliki item kosong), perlu restrukturisasi data dan memiliki beberapa masalah ketika mencoba memproses banyak data (misalnya: 100.000 item) karena akan membekukan CPU.

recyclerlistview adalah performant tetapi menderita bingkai kosong di dudukan, posisi gulir yang aneh ketika mencoba menggulir ke elemen di dudukan, dan implementasi header lengket konflik dengan Animated .

Bagaimana cara kerjanya?

Decycler memudahkan untuk menampilkan set data yang besar secara efisien. Anda menyediakan data dan menentukan bagaimana setiap item terlihat, dan perpustakaan Recycler secara dinamis membuat elemen saat dibutuhkan. Seperti namanya, pendaur ulang mendaur ulang elemen -elemen individu tersebut. Ketika sebuah item menggulir layar, pendaur ulang tidak menghancurkan pandangannya. Sebaliknya, pendaur ulang menggunakan kembali tampilan untuk item baru yang telah digulir di layar. Penggunaan kembali ini sangat meningkatkan kinerja, meningkatkan respons aplikasi Anda dan mengurangi konsumsi daya.

Ketika Daftar tidak dapat membuat barang Anda cukup cepat, komponen yang tidak dirender akan muncul sebagai ruang kosong.

Perpustakaan ini sepenuhnya asli JS, jadi kompatibel dengan semua platform yang tersedia: Android, iOS, Windows, MacOS, Web, dan Expo .

Memasang

Instal perpustakaan dari NPM atau benang hanya menjalankan salah satu baris perintah berikut:

NPM	benang
npm install react-native-big-list --save	yarn add react-native-big-list

Penggunaan

Baca juga cara bermigrasi dari flatlist

Contoh Dasar:

 import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
  const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
  return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ;

Untuk lebih banyak contoh, periksa direktori example direktori list atau periksa dokumentasi

? Tangkapan layar

Daftar biglist vs flatlist	Daftar Bagian

⚡️ Contoh

Cuplikan

• Daftar Standar
• Daftar Kolom
• Daftar Bagian

Expo

Klon atau unduh repo dan sesudahnya:

 cd Example
yarn install # or npm install
expo start

Buka Klien Expo di perangkat Anda. Gunakan untuk memindai kode QR yang dicetak oleh expo start . Anda mungkin harus menunggu sebentar sementara proyek Anda bundel dan muat untuk pertama kalinya.

Anda juga dapat mencobanya di aplikasi web yang diterbitkan: Demo

Alat peraga dan metode

Daftar ini memiliki alat peraga yang sama dari scrollview selain alat peraga dan metode spesifiknya.

? Bagaimana berkontribusi

Punya ide? Menemukan bug? Harap angkat ke masalah atau tarik permintaan. Kontribusi dipersilakan dan sangat dihargai! Setiap bit membantu, dan kredit akan selalu diberikan.