recyclerlistview
Version 4.2.1
Jika proyek ini telah membantu Anda, harap dukung kami dengan bintang?
Ini adalah tampilan ListView Kinerja Tinggi untuk React Native dan Web dengan dukungan untuk tata letak yang kompleks. JS hanya tanpa dependensi asli, terinspirasi oleh kedua Recyclerview di Android dan UICollectionView di iOS.
npm install --save recyclerlistview
Untuk beta terbaru:
npm install --save recyclerlistview@beta
Catatan: Dokumentasi akan segera ditingkatkan, untuk saat ini memeriksa komentar kode untuk kejelasan dan penjelajahan fitur. Komponen ini juga diuji secara aktif dengan Web asli React.
RecyclerListView menggunakan "daur ulang sel" untuk menggunakan kembali tampilan yang tidak lagi terlihat untuk membuat item alih -alih membuat objek tampilan baru. Pembuatan objek sangat mahal dan dilengkapi dengan overhead memori yang berarti saat Anda menggulir daftar jejak memori terus naik. Melepaskan item yang tidak terlihat dari memori adalah teknik lain tetapi itu mengarah pada penciptaan lebih banyak objek dan banyak koleksi sampah. Daur ulang adalah cara terbaik untuk membuat daftar tak terbatas yang tidak membahayakan kinerja atau efisiensi memori.
Terlepas dari semua manfaat kinerja RecyclerListView hadir dengan fitur -fitur hebat di luar kotak:
forceNonDeterministicRendering )RecyclerListView dibangun dengan kinerja dalam pikiran yang berarti tidak ada yang kosong saat gulungan cepat atau rangka tetes. RecyclerListView mendorong Anda untuk memiliki ketinggian deterministik untuk item yang perlu Anda berikan. Ini tidak berarti bahwa Anda perlu memiliki semua item dengan tinggi dan hal -hal yang sama, yang Anda butuhkan hanyalah cara untuk melihat data dan menghitung ketinggian di muka sehingga RecyclerListView dapat menghitung tata letak dalam satu umpan daripada menunggu undian terjadi. Anda masih dapat melakukan semua jenis gridview dan ListViews dengan berbagai jenis item yang semuanya didaur ulang dengan cara yang optimal. Tipe berbasis daur ulang sangat mudah dilakukan dan keluar dari kotak.
Jika Anda tidak dapat menentukan ketinggian item sebelumnya, cukup atur prop forceNonDeterministicRendering ke true di RecyclerListView. Sekarang, itu akan memperlakukan dimensi yang diberikan sebagai perkiraan dan membiarkan item mengubah ukuran. Cobalah memberikan perkiraan yang baik untuk meningkatkan pengalaman.
Video demo kelontong flipkart produksi (atau coba aplikasi): https://youtu.be/6yqeqp3mmou
Infinite Loading/View Change (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
ViewTypes campuran: https://snack.expo.io/b1gyad52b
ExtendedState, StableIDS dan ItemAnimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
Contoh Proyek: https://github.com/naqvitalha/travelmate
Sampel web (menggunakan RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Sampel Pelestarian Konteks: https://github.com/naqvitalha/RecyClerListView-Context-preservation-demo
Video lain: https://www.youtube.com/watch?v=tnv4hmmpgmc
| Menopang | Diperlukan | Tipe params | Keterangan |
|---|---|---|---|
| LayoutProvider | Ya | BaselayoutProvider | Fungsi konstruktor yang mendefinisikan tata letak (tinggi / lebar) dari setiap elemen |
| dataprovider | Ya | Dataprovider | Fungsi Konstruktor mendefinisikan data untuk setiap elemen |
| ContextProvider | TIDAK | ContextProvider | Digunakan untuk mempertahankan posisi gulir jika terlihat hancur, yang sering terjadi dengan navigasi punggung |
| Rowrenderer | Ya | (Jenis: String | Nomor, Data: any, indeks: nomor) => jsx.element | Jsx.element [] | batal | Metode yang mengembalikan komponen bereaksi untuk diterjemahkan. Anda mendapatkan jenis, data, indeks, dan ExtendedState dari tampilan di Callback |
| Initial Offset | TIDAK | nomor | Offset awal Anda ingin memulai rendering dari; Ini sangat berguna jika Anda ingin mempertahankan konteks gulir di seluruh halaman. |
| renderaheadoffset | TIDAK | nomor | Tentukan berapa banyak piksel di muka Anda ingin tampilan diberikan. Meningkatkan nilai ini dapat membantu mengurangi kosong (jika ada). Namun, menjaga ini serendah mungkin harus menjadi niat. Nilai yang lebih tinggi juga meningkatkan komputasi render ulang |
| Ishorizontal | TIDAK | Boolean | Jika benar, daftar akan beroperasi secara horizontal daripada secara vertikal |
| Onscroll | TIDAK | RawEvent: scrollevent, offsetx: angka, offsety: number) => void | Pada fungsi gulir callback yang dieksekusi sebagai gulir pengguna |
| OnRecreate | TIDAK | (params: onrecreateparams) => void | fungsi panggilan balik yang dieksekusi saat menciptakan kembali tampilan pendaur ulang dari penyedia konteks |
| ExternalScrollView | TIDAK | {baru (props: scrollviewDefaultProps): baseesCrollView} | Gunakan ini untuk meneruskan implementasi BasesCrollView Anda |
| Onendreached | TIDAK | () => batal | Fungsi panggilan balik dieksekusi saat akhir tampilan dipukul (minus onendthreshold jika didefinisikan) |
| OnendreachedThreshold | TIDAK | nomor | Tentukan berapa banyak piksel di muka untuk panggilan balik onendreached |
| OnendreachedThresholdrelative | TIDAK | nomor | Tentukan seberapa jauh dari akhir (dalam satuan panjang yang terlihat dari daftar) tepi bawah daftar harus dari ujung konten untuk memicu panggilan balik onendreached |
| OnVisibleIndices berubah | TIDAK | Tonitemstatuschanged | Memberikan indeks yang terlihat; membantu dalam mengirimkan acara kesan |
| OnVisibleIndexeschange | TIDAK | Tonitemstatuschanged | (Terdesentasikan dalam 2.0 beta) memberikan indeks yang terlihat; membantu dalam mengirimkan acara kesan |
| Renderfooter | TIDAK | () => Jsx.element | Jsx.element [] | batal | Berikan metode ini jika Anda ingin membuat footer. Membantu dalam menampilkan loader saat melakukan beban tambahan |
| InitialRenderIndex | TIDAK | nomor | Tentukan indeks item awal yang ingin Anda mulai dari. Lebih disukai daripada OFFSETSIT jika keduanya ditentukan |
| Scrollthrottle | TIDAK | nomor | iOS saja; Durasi throttle gulir |
| CanChangesize | TIDAK | Boolean | Tentukan jika ukuran dapat berubah |
| jarak dari window | TIDAK | nomor | (Depricated) Gunakan applyWindowCorrection() API dengan windowShift . Penggunaan? |
| applyWindowCorrection | TIDAK | (Offset: Number, WindowCorrection: WindowCorrection) => void | (Peningkatan/penggantian ke distanceFromWindow API) memungkinkan pembaruan windowbound yang terlihat berdasarkan nilai pemasyarakatan yang dilewati. Pengguna dapat menentukan WindowShift ; Jika seluruh RecyclerListWindow perlu bergeser ke bawah/ke atas, startCorrection ; Jika terikat jendela atas perlu digeser untuk jendela atas yang terikat untuk digeser adalah konten yang tumpang tindih dengan tepi atas RecyclerListView, ENDCorrection : Untuk mengubah jendela bawah untuk kasus penggunaan yang serupa. Penggunaan? |
| UseWindowsCroll | TIDAK | Boolean | Hanya web; Elemen tata letak di jendela, bukan div yang dapat digulir |
| Disablerecycling | TIDAK | Boolean | Matikan daur ulang |
| forcenondeterministicrendering | TIDAK | Boolean | Default salah; Jika dimensi yang diaktifkan yang disediakan dalam penyedia tata letak tidak akan ditegakkan secara ketat. Gunakan ini jika dimensi item tidak dapat ditentukan secara akurat |
| ExtendedState | TIDAK | obyek | Dalam beberapa kasus data yang disahkan pada tingkat baris mungkin tidak berisi semua info yang diandalkan item, Anda dapat menyimpan semua info lain di luar dan mewariskannya melalui prop ini. Mengubah objek ini akan menyebabkan semuanya merawat kembali. Pastikan Anda tidak sering mengubahnya untuk memastikan kinerja. Render ulang itu berat. |
| Itemanimator | TIDAK | Itemanimator | Mengaktifkan animasi sel item RecyclerListView (Shift, Tambah, Hapus, dll) |
| gaya | TIDAK | obyek | Untuk meneruskan gaya ke dalam gulir dalam |
| ScrollViewProps | TIDAK | obyek | Untuk semua alat peraga yang perlu diproksi untuk gulir dalam/eksternal. Masukkan mereka ke dalam objek dan mereka akan disebarkan dan diturunkan. |
| tata letak | TIDAK | Dimensi | Akan mencegah render awal yang diperlukan untuk menghitung ukuran ListView dan menggunakan dimensi ini untuk membuat daftar daftar dalam render pertama itu sendiri. Ini berguna untuk kasus seperti rendering sisi server. Prop canChangeSize harus diatur ke true jika ukurannya dapat diubah setelah rendering. Perhatikan bahwa ini bukan ukuran tampilan gulir dan hanya digunakan untuk tata letak. |
| Onitemlayout | TIDAK | nomor | Fungsi panggilan balik yang dieksekusi ketika item dari RecyclerListView (pada indeks) telah menjadi tata letak. Ini juga dapat digunakan sebagai proxy untuk item -itemsrender jenis panggilan balik. |
| WindowCorrectionConfig | TIDAK | obyek | Digunakan untuk menentukan adalah konfigurasi koreksi jendela dan apakah itu harus diterapkan pada beberapa acara gulir |
Untuk set fitur lengkap, lihat definisi prop RecyclerListView (bagian bawah file). Semua fitur ScrollView seperti RefreshControl juga bekerja di luar kotak.
applyWindowCorrection digunakan untuk mengubah batas jendela yang terlihat dari RecyclerListView secara dinamis. Windowcorrection of RecyclerListView bersama dengan offset gulir saat ini terpapar ke pengguna. Objek windowCorrection terdiri dari 3 nilai numerik:
windowShift - Penggantian langsung parameter distanceFromWindow . Window Shift adalah nilai offset dimana RecyclerListView secara keseluruhan dipindahkan dalam stickycontainer, gunakan param ini untuk menentukan seberapa jauh item daftar pertama dari jendela atas. Nilai ini memperbaiki offset gulir untuk stickyObjects serta RecyclerListView.startCorrection - StartCorrection digunakan untuk menentukan pergeseran di atas jendela yang terlihat terikat, dengan mana pengguna dapat menerima instance header lengket yang benar bahkan ketika faktor eksternal seperti koordinatorLayout toolbar.endCorrection - ENDCorrection digunakan untuk menentukan pergeseran di bagian bawah jendela yang terlihat terikat, dengan mana pengguna dapat menerima instance footer lengket yang benar ketika faktor eksternal seperti bilah aplikasi bawah mengubah terikat tampilan yang terlihat.Seperti yang terlihat pada contoh di bawah ini
Naskah bekerja di luar kotak. Satu -satunya eksekusi adalah dengan alat peraga scrollview yang diwarisi. Agar TypeScript dapat bekerja dengan alat peraga scrollview yang diwarisi, Anda harus menempatkan alat scrollview yang diwarisi di dalam alat peraga ScrollViewProps.
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/web mis, import { RecyclerListView } from "recyclerlistview/web" . Gunakan alias jika Anda ingin melestarikan jalur impor. Hanya kode spesifik platform yang merupakan bagian dari build sehingga, tidak ada kode yang tidak perlu yang akan dikirimkan dengan aplikasi Anda.requestAnimationFrame , ResizeObserver Apache v2.0
Harap buka masalah untuk setiap bug yang Anda temui. Anda dapat menghubungi saya di Twitter @naqvitalha atau, menulis ke [email protected] untuk pertanyaan apa pun yang mungkin Anda miliki.
