React-native-snap-carousel: FlatList को किसी अन्य घटक से बदलें?

दो प्रमुख कमियां:

• पहले वाला एक ScrollView बढ़ाता है।
• दूसरा एक देशी प्लगइन है, लेकिन यह FlatList के लापता फीचर्स को लागू नहीं करता है जो हिंडोला (स्क्रॉल अवधि, स्क्रॉल कॉलबैक ...) में बहुत सुधार करेगा।

सच कहूँ तो, मुझे FlatList बेकार है। react-native-snap-carousel (जो मुझे BTW से प्यार है) के लिए मेरा वर्कअराउंड initialNumToRender से data.length । यह बगफ्री संस्करण प्राप्त करने का एकमात्र तरीका है।
यह मेरी पोस्ट-इंस्टॉल स्क्रिप्ट से एक स्निपेट है:

# 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

अब, यह अच्छा होगा अगर react-native-snap-carousel ने एक ऐसी सुविधा का समर्थन किया है जो मुझे initialNumToRender बाहर से सेट करने की अनुमति देगा, इसलिए मुझे Carousel.js किसी भी समय पैच करने की आवश्यकता नहीं होगी।
मैं यह भी तर्क दूंगा कि Carousel.js initialNumToRender से data.length डिफ़ॉल्ट रूप से सेट करना चाहते हैं यदि आइटमों की अपेक्षित संख्या 100 (संभवतः सभी उपयोग के मामलों में 90%) से कम है।

दो पुस्तकालयों में से जो आपने ऊपर पाया, मुझे react-native-largelist बहुत ही लुभावना लगता है। क्या लापता सुविधाओं के आसपास काम करना संभव होगा, या शायद लेखक को उन्हें जोड़ने के लिए मना लेंगे?

अरे @PublicParadise ,

ठीक है, initialNumToRender अतिनिष्ठ सहारा का हिस्सा है <Carousel initialNumToRender={data.length} /> का उपयोग करने में सक्षम होना चाहिए ;-) मैं गारंटी दे सकता हूं कि यह काम करता है, क्योंकि मैंने इसे आज़माया है; # 235।

लेकिन आपको लगता है कि और इसलिए, के साथ आने के लिए प्रदर्शन अनुकूलन नहीं है जो FlatList , मैं करने के लिए सिर्फ सेट की सिफारिश करेंगे useScrollView करने के लिए true । मैंने हाल ही में इस तरह के उपयोग के मामलों को ध्यान में रखते हुए और पूरी तरह से बग्गी FlatList को बायपास करने के लिए इस प्रस्ताव को पेश किया है। इसके अलावा, यह इस तरह की भयानक सुविधाओं को पेश करने की अनुमति देता है: पी

मेरे द्वारा विचार किए जा रहे दो प्लगइन्स के बारे में, मुझे पहले कई परीक्षण चलाने की आवश्यकता है। यह निश्चित रूप से मदद करेगा अगर हम लापता अभी तक आवश्यक सुविधाओं को लागू करने के लिए react-native-largelist के लेखक को मना सकते हैं!

ध्यान दें कि इस समय मुझे विश्वास नहीं हो रहा है कि मेरा अपना प्लगइन एक देशी पर आधारित है क्योंकि मैं इसे बनाए रखने में सक्षम नहीं होगा अगर लेखक ऐसा करना बंद कर दे (जबकि मुझे कोई JS एक लेने में कोई समस्या नहीं होगी)।

हाय @ bd- चाप,

सुझावों के लिए धन्यवाद। ईमानदार होने के लिए मैं FlatList इतना निराश हो गया कि मैंने हैक रखा और घटक को फिर कभी नहीं छुआ। वापस तो initialNumToRender एक अतिप्रचलित प्रस्ताव नहीं था और useScrollView भी बेहतर लगता है।

ऐसा लगता है कि FlatList को Animated कुछ अजीब निर्भरता है। शायद, जहाँ ज्यादातर लोगों को समस्या है। अभी 6 दिन पहले किसी ने उस बारे में

मैं खुद भी FlatList जगह लेना चाह रहा था और कुछ शोध किया। घुमावदार सूचियों और प्रतिपादन जो देखने में नहीं लगता है उसे एक कठिन समस्या माना जाता है। मुझे RxJS / most.js समाधान सबसे अच्छा लगा।

क्या आपके पास प्रतिस्थापन के रूप में उन दो समाधानों में से एक को लागू करने का कोई सौभाग्य है?

नहीं, मैंने केवल शोध किया है। वापस तो मैं अभी भी उम्मीद कर रहा था कि वे अंततः FlatList तय करेंगे।
मुझे अपने शोध से कुछ लिंक साझा करने दें:

• RivexS वेधशालाओं का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग में नैवेय अनंत स्क्रॉल
• प्रतिक्रिया के साथ RxJS का उपयोग करें
• उच्च प्रदर्शन प्रतिक्रिया मूल सूची दृश्य के लिए पुनरावर्तन की पंक्तियाँ
• प्रतिक्रियात्मक सूची दृश्य प्रयोग
• चक्र। Js का उपयोग करके स्क्रॉल तालिका
• Bacon.js के साथ एक अनंत स्क्रॉल सूची बनाएं
• अनंत-बेकन का rxjs में पर्याप्त अनुवाद

लेकिन मुझे लगता है कि देशी प्लगइन ( react-native-largelist ) जाने का सही तरीका है।

अपने शोध को साझा करने के लिए धन्यवाद 👍

सच कहूं तो, मेरे पास अभी यह सब करने के लिए समय नहीं है। अगर आपको react-native-largelist में गोता लगाने का मन करता है, तो यह बहुत मदद करेगा। यदि नहीं, तो हम एक दूसरे को तैनात रखना सुनिश्चित करें ;-)

अद्यतन: जैसा कि मैं उन लिंक को खोद रहा था जिन्हें मैंने महसूस किया कि wix.com से ताल कोल वास्तव में एक अच्छा माध्यम है। अब तक मुझे उनके सभी लेख पसंद हैं। यह हमारी चर्चा के लिए भी प्रासंगिक हो सकता है:

• रिऐक्टिव नेटिव लिस्टव्यू परफॉरमेंस रिविजिटेड - रिसाइकलिंग विदाउट द ब्रिज
• BindingListView - प्रत्यक्ष दृश्य बंधन का समर्थन करने वाले प्रतिक्रियात्मक सूची दृश्य प्रायोगिक कार्यान्वयन

@ बीडी-चाप यहां भी, मेरे पास दिन की नौकरी की काफी मांग है और मेरा समय और संसाधन सीमित हैं।
मैं BindingListView को देख सकता हूं। लेकिन हाँ: चलो एक दूसरे को पाश में रखते हैं :)

हां, ताल कोल ने रिएक्ट नेटिव और प्रदर्शन अनुकूलन के बारे में कुछ शीर्ष-गुणवत्ता वाले लेख लिखे हैं।

इसके अलावा, मुझे Wix के प्लगइन react-native-interactable में विशेष रूप से दिलचस्पी थी, लेकिन दुर्भाग्य से उनके पास कुछ पेसकी मुद्दों से निपटने के लिए समय नहीं था।

@ BD-चाप क्या के साथ समस्या यह है recyclerlistview विस्तार ScrollView ? दोनों large-list और FlatList एक ही पर बनाते हैं।
मैंने रिसाइकलरव्यू लिखा और हाल ही में मेरी टीम ने इस हिंडोला घटक का उपयोग किया। हमने पुनर्नवीनीकरण के साथ फ़्लैटलिस्ट की अदला-बदली की और यह बहुत अच्छा काम करता है।

हे @naqvitalha , में चमक के लिए धन्यवाद!

मेरे अनुभव से, और अब तक, एक ScrollView पर निर्मित सब कुछ अंततः प्रदर्शन सीमाओं को दर्शाता है जब सीमाओं को संभालने और / या सुविधा के लिए बड़ी संख्या में आइटम होते हैं। लेकिन बाकी लोगों ने भरोसा दिलाया कि मेरा लक्ष्य गलत साबित होना है ;-)

क्या आप इस विकास के लिए एक पीआर प्रस्तुत करने में दिलचस्पी लेंगे ताकि इसे मोटे तौर पर और अच्छी तरह से जांचा जा सके?

@ बीडी-आर्क श्योर। मुझे वह करने दो।

@naqvitalha @ bd-arc पीआर के साथ कोई भी स्थिति अपडेट flatlist recyclerlistview साथ बदलने के लिए? मैं इसका इस्तेमाल करना पसंद करूंगा

ScrollView FlatList और recyclerlistview , लेकिन क्या किसी ने इस बात पर ध्यान दिया है कि प्रतिक्रिया-मूल-हावभाव-हैंडलर इस दायित्व को कैसे सुधार सकता है?

डॉक्स से:

इस लाइब्रेरी के इशारों को अब जेएस रिस्पोंडर सिस्टम द्वारा नियंत्रित नहीं किया जाता है, बल्कि यूआई थ्रेड में पहचाना और ट्रैक किया जाता है। यह स्पर्श इंटरैक्शन और जेस्चर ट्रैकिंग को न केवल चिकनी बनाता है, बल्कि भरोसेमंद और निर्धारक भी बनाता है।

इसके लिए react-native link आवश्यकता होती है, जो इस आर्थिक निर्भरता को मुक्त रखने के मामले में दुर्भाग्यपूर्ण है। लेकिन अब यह एक्सपो / सीआरएनए में शामिल है।

अरे @ pcooney10 ,

मैंने पहले ScrollView / FlatList एक (जैसा कि आप # 40 में देख सकते हैं) के शीर्ष पर PanResponder को लागू करने पर विचार किया है।

क्या आपने react-native-gesture-handler साथ कुछ इसी तरह की कोशिश की है? मुझे यह निर्धारित करने के लिए कुछ प्रतिक्रिया मिलनी चाहिए कि क्या यह एक वैध विचार या पागलपन का सीधा तरीका है ...

@amitassaraf इस घटक के अनुबंध सपाट होने के बाद से फ्लैटलिस्ट के समान हैं। आरएलवी के लिए लेआउट प्रदाता अनिवार्य है। यह एक ब्रेकिंग परिवर्तन होगा या हमें एक नई विधा शुरू करनी होगी।

सभी को नमस्कार, मैं इस घटक का उपयोग करके अपने अनुभव को थोड़ा साझा करना चाहता हूं। मुझे ScrollView भीतर इसका उपयोग करने की आवश्यकता थी, जिससे यह समस्या उत्पन्न हुई कि सभी आइटम आपको अधिक से अधिक दिखाएंगे, यह संकेत देगा कि संपत्ति removeClippedSubviews तत्वों को स्मृति से हटा नहीं है, अन्यथा, प्रत्येक पथ एंड्रॉइड में रैम मेमोरी को खत्म करने के लिए ऐप बनाने वाले नए तत्वों ने ScrollView ( या किसी अन्य सूची ) के भीतर सूची का एक सही संचालन प्राप्त करने के लिए निम्नलिखित FlatList गुणों का उपयोग किया।

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

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

आपके मामले के आधार पर, आप उन मानों को कॉन्फ़िगर कर सकते हैं जो आपकी आवश्यकताओं के अनुरूप हैं। इस तरह से आपके पास लगभग कोई स्मृति रिसाव के साथ अपेक्षित प्रदर्शन नहीं होगा

@ machester4 अपने निष्कर्षों को साझा करने के लिए धन्यवाद! वे मान सभी के उपयोग के मामले में फिट नहीं होंगे, लेकिन दृष्टिकोण ध्वनि है ;-)

आप उस तर्क को अपनी क्षैतिज सूचियों पर लागू कर सकते हैं जो एक ऊर्ध्वाधर सूची में हैं। मेरे मामले में मेरी सभी क्षैतिज सूचियों में एक बार में 3 तत्व दिखाई देते हैं। उस कारण से मान maxToRenderPerBatch और initialNumToRender 4 में हैं जो मुझे उपयोगकर्ता के लिए एक बेहतर अनुभव मिलता है।

@naqvitalha आप साझा कर सकते हैं कि आपने हिंडोला के अंदर रेसीलर व्यू के साथ फ्लैट लिस्ट को कैसे बदल दिया? इसके अलावा, क्या आप RecyclerView में https://github.com/facebook/react-native/issues/20500 जैसी किसी चीज़ का समर्थन करते हैं?

@ बीडी-आर्क प्रमुख, मुझे पूरा यकीन है कि यह react-native-snap-carousel ग्राहकों को प्रभावित करेगा:
https://github.com/facebook/react-native/issues/21070

@PublicPar स्वर्ग के प्रमुखों के लिए धन्यवाद!

FlatList कभी भी विस्मित करने के लिए नहीं रुकता ... ऐसा लगता है कि InteractionManager कहीं चल रहा हो, इस प्रकार घटक तर्क के निष्पादन को स्थगित कर देता है।

यह निश्चित रूप से अच्छा करने के लिए FlatList छुटकारा पाने का समय है :-)

नमस्ते, इस क्षेत्र पर अब तक कोई अद्यतन?

वास्तव में मेरी राय में FlatList पास वास्तव में एक महान सूची घटक बनने के लिए क्या है।
यह सब याद आ रहा है "अनुमानित पंक्ति ऊंचाई" की अवधारणा है कि UITableView iOS पर है।
इसलिए आपको "किसी हैकरी और ट्रिकरी को करने के लिए मुझे अतुल्यकालिक रूप से कितनी पंक्तियों को लेआउट करना चाहिए" के लिए एक संपत्ति की आवश्यकता नहीं है।

हम सभी की जरूरत है, जैसा कि मैंने कहा, एक estimatedRowHeight (संभवतः कॉलबैक के साथ प्रति पंक्ति अलग-अलग अनुमानों की अनुमति देने के लिए, लेकिन अभी भी अनुमान है!)।

• इसका उपयोग स्क्रॉल दृश्य की सामग्री आकार की गणना करने के लिए किया जाएगा।
• किसी ऑफसेट पर स्क्रॉल करने से सीधे उस पर स्क्रॉल होगा।
• जब भी आप पंक्तियों को रेंडर करते हैं - बाहर रखे जाने के बाद उनके आकार को कैश करें।
• कैश्ड साइज़ + अनुमानित राईट हाइट्स का उपयोग किसी ऑफ़सेट या ऑफ़सेट के लिए आइटम की तेज़ी से गणना करने के लिए करें।
• हम बहुत अधिक आइटम इंडेक्स से पहले सभी पंक्तियों के लिए अनुमान / कैश पर विचार नहीं कर सकते हैं, बस किसी प्रकार की खिड़की के आकार का उपयोग करें, और बाकी के लिए औसत अनुमान।

इसलिए सामग्री का आकार गतिशील रूप से बदल रहा होगा, लेकिन कोई भी इसकी परवाह नहीं करेगा या इसे महसूस नहीं करेगा, जैसा कि आप पिछले आइटम या किसी अन्य सूचकांक पर स्क्रॉल कर सकते हैं और यह बिना ग्लिट्स के वहां पहुंच जाएगा, और आप इतना काम नहीं करेंगे कि वहां हो जाएगा स्क्रॉल करते समय आइटम गुम होना।

हाय @naqvitalha , क्या आपके पास इस घटक के लिए आरएलवी को फ्लैटलिस्ट पर स्थानांतरित करने के बारे में कुछ शाखा या पीआर है? यह मेरे लिए बहुत उपयोगी होगा। धन्यवाद।

मेरे घटक को आजमाने के लिए धन्यवाद।

लगभग सभी दृश्यों के लिए, आपको इसे इस तरह करना चाहिए:

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

और सुनिश्चित करें कि हिंडोला के सभी माता-पिता में { फ्लेक्स: 1 } शैली शामिल है।

इस टिप पर ध्यान दें:

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

यदि आप चाहते हैं कि आपके आइटम लार्जलिस्ट के आकार को बढ़ाएं तो लार्जलिस्ट अच्छा काम नहीं कर सकता है। आपको पुष्टि करनी चाहिए कि आपके लार्जलिस्ट का आकार उसके माता-पिता या विरासत में मिली ऊंचाई से विरासत में मिला है।

यदि आप चीनी समझते हैं तो मुझे मेरे पूल अंग्रेजी के लिए क्षमा करें। इस मुद्दे की जाँच करें

FlatList घटक अभी बहुत छोटी है, अवधि है।

ये प्लगइन्स एक दिलचस्प प्रतिस्थापन का गठन कर सकते हैं:

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

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

सही कहा