React-native-snap-carousel: Ganti FlatList dengan komponen lain?

Dua kelemahan utama:

• Yang pertama menambah ScrollView .
• Yang kedua adalah plugin asli, tetapi tidak menerapkan fitur FlatList yang hilang yang akan sangat meningkatkan carousel (durasi gulir, panggilan balik gulir ...).

Terus terang, saya menemukan FlatList tidak dapat digunakan. Solusi saya untuk react-native-snap-carousel (yang saya suka BTW) adalah menyetel initialNumToRender menjadi data.length . Itulah satu-satunya cara untuk mendapatkan versi bebas bug.
Ini adalah cuplikan dari skrip pasca-pemasangan saya:

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

Sekarang, alangkah baiknya jika react-native-snap-carousel mendukung fitur yang memungkinkan saya menyetel initialNumToRender dari luar sehingga saya tidak perlu menambal Carousel.js lagi.
Saya juga berpendapat bahwa Carousel.js mungkin ingin menyetel initialNumToRender menjadi data.length secara default jika jumlah item yang diharapkan di bawah 100 (mungkin 90% dari semua kasus penggunaan).

Dari dua perpustakaan yang Anda temukan di atas, saya menemukan react-native-largelist sangat menarik. Apakah mungkin untuk mengatasi fitur yang hilang, atau mungkin meyakinkan penulis untuk menambahkannya?

Hei @PublicParadise ,

Nah, initialNumToRender adalah bagian dari props yang dapat diganti jadi Anda harus dapat menggunakan <Carousel initialNumToRender={data.length} /> tanpa perlu patch ;-) Saya dapat menjamin bahwa itu berfungsi, karena saya sudah mencobanya di # 235.

Tetapi jika Anda harus melakukan itu dan, oleh karena itu, siap untuk melupakan tentang pengoptimalan kinerja yang seharusnya datang dengan FlatList , saya akan merekomendasikan untuk menyetel useScrollView menjadi true . Saya baru-baru ini memperkenalkan properti ini dengan mempertimbangkan kasus penggunaan semacam ini dan untuk sepenuhnya melewati FlatList benar-benar bermasalah. Selain itu, ini memungkinkan pengenalan fitur-fitur luar biasa seperti ini : p

Mengenai dua plugin yang saya pertimbangkan, saya perlu menjalankan banyak pengujian terlebih dahulu. Ini pasti akan membantu jika kita dapat meyakinkan penulis react-native-largelist untuk mengimplementasikan fitur yang hilang namun diperlukan!

Perhatikan bahwa untuk saat ini saya tidak merasa percaya diri mendasarkan plugin saya sendiri pada yang asli karena saya tidak akan dapat mempertahankannya jika penulis berhenti melakukannya (sedangkan saya tidak akan memiliki masalah mengambil alih JS).

Hai @ bd-arc,

terima kasih atas tipnya. Sejujurnya saya menjadi sangat frustrasi dengan FlatList sehingga saya melakukan peretasan dan tidak pernah menyentuh komponen itu lagi. Saat itu initialNumToRender bukanlah properti yang dapat diganti dan useScrollView tampaknya lebih baik.

Tampaknya FlatList memiliki ketergantungan yang aneh pada Animated . Mungkin di situlah kebanyakan orang mengalami masalah. Hanya 6 hari yang lalu seseorang melaporkan bug baru tentang itu.

Saya sendiri juga sedang mencari cara untuk mengganti FlatList dan melakukan penelitian. Daftar jendela dan menampilkan apa yang terlihat tampaknya tidak dianggap sebagai masalah yang sulit. Saya menyukai solusi RxJS / most.js yang terbaik.

Apakah Anda beruntung menerapkan salah satu dari dua solusi tersebut sebagai pengganti?

Tidak, saya hanya melakukan penelitian. Saat itu saya masih berharap mereka pada akhirnya akan memperbaiki FlatList .
Izinkan saya membagikan beberapa tautan dari penelitian saya:

• Scroll Naive Infinite dalam Pemrograman Reaktif menggunakan Observable RxJS
• Gunakan RxJS dengan React
• Daur Ulang Baris untuk Tampilan Daftar Asli React Berkinerja Tinggi
• React Native ListView Experiments
• Gulir tabel menggunakan cycle.js
• Buat Daftar Gulir Tak Terbatas dengan Bacon.js
• Terjemahan kasar dari bacon tak terbatas ke rxjs

Tetapi saya merasa bahwa plugin asli ( react-native-largelist ) adalah cara yang tepat.

Terima kasih telah membagikan penelitian Anda 👍

Sejujurnya, saya tidak punya waktu sekarang untuk menguji semua ini. Jika Anda ingin mempelajari react-native-largelist , itu akan sangat membantu. Jika tidak, mari pastikan untuk saling memposting ;-)

Pembaruan: saat saya menggali tautan itu, saya menyadari bahwa Tal Kol dari wix.com memiliki blog Medium yang sangat bagus. Sejauh ini saya suka semua artikelnya. Yang ini mungkin juga relevan untuk diskusi kita:

• React Native ListView Performance Revisited - Mendaur Ulang Tanpa Bridge
• BindingListView - Implementasi eksperimental React Native ListView yang mendukung pengikatan tampilan langsung

@ bd-arc Sama halnya di sini, saya memiliki pekerjaan harian yang cukup menuntut dan waktu serta sumber daya saya terbatas.
Saya mungkin melihat BindingListView . Tapi ya: mari kita tetap terhubung :)

Ya, Tal Kol telah menulis beberapa artikel berkualitas tinggi tentang React Native dan pengoptimalan kinerja.

Juga, saya sangat tertarik dengan plugin Wix react-native-interactable , tapi sayangnya mereka belum punya waktu akhir-akhir ini untuk mengatasi beberapa masalah yang mengganggu.

@ bd-arc Apa masalah dengan recyclerlistview extending ScrollView ? Baik large-list dan FlatList dibangun di atas yang sama.
Saya menulis recyclerlistview dan baru-baru ini tim saya menggunakan komponen carousel ini. Kami menukar FlatList dengan recyclerlistview dan itu berfungsi dengan baik.

Hai @naqvitalha , terima kasih telah bersinar!

Dari pengalaman saya, dan sampai sekarang, semua yang dibangun di atas ScrollView pada akhirnya menunjukkan batasan kinerja ketika ada sejumlah besar item untuk ditangani dan / atau batasan fitur. Tetapi yakinlah bahwa tujuan saya adalah untuk terbukti salah ;-)

Apakah Anda tertarik untuk mengirimkan PR untuk evolusi ini agar dapat diuji secara luas dan menyeluruh?

@ bd-arc Tentu. Biar aku yang melakukannya.

@naqvitalha @ bd-arc flatlist dengan recyclerlistview ? Saya ingin sekali menggunakannya

Tidak terkait dengan ScrollView FlatList dan recyclerlistview , tetapi apakah ada yang melihat bagaimana react-native-gesture-handler dapat meningkatkan lib ini?

Dari dokumen:

Dengan library ini, gestur tidak lagi dikontrol oleh sistem penjawab JS, tetapi dikenali dan dilacak di thread UI. Itu membuat interaksi sentuhan dan pelacakan gerakan tidak hanya mulus, tetapi juga dapat diandalkan dan deterministik.

Ini membutuhkan react-native link , yang sangat disayangkan dalam hal menjaga ketergantungan lib ini gratis. Tapi sekarang sudah termasuk dalam Expo / CRNA.

Hai @ pcooney10 ,

Saya sebelumnya telah mempertimbangkan untuk menerapkan kustom PanResponder di atas ScrollView / FlatList one (seperti yang Anda lihat di # 40).

Sudahkah Anda mencoba sesuatu yang serupa dengan react-native-gesture-handler ? Saya ingin mendapatkan umpan balik untuk menentukan apakah ini adalah ide yang sah atau cara langsung menuju kegilaan ...

@amitassaraf Kontrak dari komponen ini sangat mirip dengan FlatList karena props diturunkan. Untuk penyedia tata letak RLV adalah wajib. Ini akan menjadi perubahan besar atau kami harus memperkenalkan mode baru.

Halo semuanya, saya ingin sedikit berbagi pengalaman saya menggunakan komponen ini. Saya perlu menggunakannya dalam ScrollView yang menghasilkan masalah bahwa semua item akan ditampilkan lebih dari yang Anda tunjukkan pada properti removeClippedSubviews elemen tidak dihapus dari memori, jika tidak, setiap jalur membuat elemen baru yang menyebabkan aplikasi menghabiskan memori RAM di Android Untuk mendapatkan operasi yang benar dari daftar dalam ScrollView ( atau daftar lain ) gunakan properti FlatList .

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

Bergantung pada kasus Anda, Anda dapat mengonfigurasi nilai yang paling sesuai dengan kebutuhan Anda. dengan cara ini Anda akan mendapatkan kinerja yang diharapkan dengan hampir tidak ada kebocoran memori

@ machester4 Terima kasih telah membagikan temuan Anda! Nilai-nilai itu tidak akan cocok dengan kasus penggunaan semua orang, tetapi pendekatannya bagus ;-)

Anda dapat menerapkan logika tersebut ke daftar horizontal Anda yang berada dalam daftar vertikal. dalam kasus saya, semua daftar horizontal saya memiliki 3 elemen yang terlihat pada satu waktu. untuk alasan itu nilainya adalah maxToRenderPerBatch dan initialNumToRender berada di 4 yang mana saya mendapatkan pengalaman yang lebih baik bagi pengguna.

@naqvitalha Bisakah Anda berbagi bagaimana Anda mengganti FlatList dengan RecylerView di dalam carousel? Selain itu, apakah Anda mendukung sesuatu seperti https://github.com/facebook/react-native/issues/20500 di RecyclerView?

@ bd-arc Perhatian, saya cukup yakin ini akan memengaruhi react-native-snap-carousel klien:
https://github.com/facebook/react-native/issues/21070

Terima kasih atas perhatiannya pada @PublicParadise!

FlatList tidak pernah berhenti membuat kagum ... Sepertinya InteractionManager mungkin sedang berjalan di suatu tempat, sehingga menunda eksekusi logika komponen.

Sudah pasti waktunya untuk membuang FlatList untuk selamanya :-)

Hai, ada pembaruan tentang bidang ini sejauh ini?

Sebenarnya FlatList menurut saya memiliki apa yang diperlukan untuk menjadi komponen daftar yang sangat bagus.
Semua yang hilang adalah konsep "perkiraan tinggi baris" yang dimiliki UITableView di iOS.
Jadi, Anda TIDAK memerlukan properti untuk "berapa banyak baris yang harus saya tata letak secara asinkron untuk melakukan beberapa peretasan dan tipu daya".

Yang kita butuhkan hanyalah, seperti yang saya katakan, estimatedRowHeight (mungkin dengan panggilan balik untuk memungkinkan perkiraan yang berbeda per baris, tetapi masih perkiraan!).

• Ini akan digunakan untuk menghitung ukuran konten tampilan gulir.
• Menggulir ke offset akan menggulir langsung ke sana.
• Kapanpun Anda merender baris - cache ukurannya setelah ditata.
• Gunakan ukuran cache + perkiraan tinggi baris untuk menghitung offset ke item dengan cepat, atau item untuk offset.
• Kami juga tidak dapat mempertimbangkan perkiraan / cache untuk semua baris sebelum indeks item yang sangat tinggi, cukup gunakan beberapa jenis ukuran jendela, dan perkiraan rata-rata untuk sisanya.

Jadi ukuran konten akan berubah secara dinamis tetapi tidak ada yang akan peduli atau merasakannya, karena Anda dapat menggulir ke item terakhir atau indeks lainnya dan itu akan sampai di sana tanpa gangguan, dan Anda tidak akan melakukan terlalu banyak pekerjaan yang akan ada. item yang hilang saat menggulir.

Hai @naqvitalha , Apakah Anda memiliki beberapa cabang atau PR yang akan bermigrasi flatlist ke RLV untuk komponen ini? Ini akan sangat berguna bagi saya. Terima kasih.

Terima kasih telah mencoba komponen saya.

Untuk hampir semua adegan, Anda harus melakukannya seperti ini:

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

Dan pastikan semua induk Carousel berisi gaya { flex: 1 }.

Perhatikan tip ini:

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

LargeList tidak dapat bekerja dengan baik jika Anda ingin itemnya menopang ukuran LargeList. Anda harus mengonfirmasi bahwa ukuran LargeList Anda diwarisi dari induknya atau ketinggian yang dibatasi.

Maafkan saya untuk bahasa Inggris kolam saya, jika Anda mengerti bahasa Mandarin. Lihat masalah ini

Komponen FlatList terlalu buggy, titik.

Plugin ini mungkin merupakan pengganti yang menarik:

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

kata yang bagus