React-native-snap-carousel: هل تريد استبدال FlatList بمكون آخر؟

عيبان رئيسيان:

• الأول يمتد إلى ScrollView .
• الثاني هو مكون إضافي أصلي ، لكنه لا ينفذ الميزات المفقودة لـ FlatList والتي من شأنها تحسين الرف الدائري بشكل كبير (مدة التمرير ، إعادة الاتصال التمرير ...).

بصراحة ، أجد FlatList غير قابل للاستخدام. الحل الخاص بي مقابل react-native-snap-carousel (الذي أحبه راجع للشغل) هو تعيين 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 . علاوة على ذلك ، فإنه يسمح بتقديم ميزات رائعة مثل هذه : p

فيما يتعلق بالملحقين الإضافيين اللذين أفكر فيهما ، أحتاج إلى إجراء الكثير من الاختبارات أولاً. سيكون من المفيد بالتأكيد إذا تمكنا من إقناع مؤلف react-native-largelist بتنفيذ الميزات المفقودة والمطلوبة!

لاحظ أنه في الوقت الحالي لا أشعر بالثقة في بناء المكون الإضافي الخاص بي على مكون أصلي لأنني لن أكون قادرًا على الاحتفاظ به إذا توقف المؤلف عن القيام بذلك (بينما لن أواجه مشكلة في الاستيلاء على JS واحد).

مرحبًا @ bd-arc ،

شكرا على النصائح. لأكون صادقًا ، شعرت بالإحباط الشديد من FlatList لدرجة أنني وضعت الاختراق ولم أتطرق إلى المكون مرة أخرى. في ذلك الوقت ، لم يكن initialNumToRender عنصرًا قابلاً للتجاوز ويبدو أن useScrollView يبدو أفضل.

يبدو أن FlatList لديه بعض التبعية الغريبة لـ Animated . ربما يكون هذا هو المكان الذي يعاني فيه معظم الناس من مشاكل. منذ 6 أيام فقط قدم شخص ما

أنا نفسي كنت أتطلع أيضًا إلى استبدال FlatList وقمت ببعض الأبحاث. لا يبدو أن لف القوائم وعرض ما يتم عرضه يمثل مشكلة صعبة. أحببت حلول RxJS / most.js بشكل أفضل.

هل كان لديك أي حظ في تنفيذ أحد هذين الحلين كبديل؟

لا ، لقد أجريت البحث فقط. في ذلك الوقت كنت ما زلت آمل أن يصلحوا في النهاية FlatList .
اسمحوا لي بمشاركة بعض الروابط من بحثي:

• التمرير اللانهائي الساذج في البرمجة التفاعلية باستخدام RxJS Observables
• استخدم RxJS مع React
• إعادة تدوير الصفوف للحصول على عروض قائمة أصلية عالية الأداء للتفاعل
• تفاعل مع تجارب ListView الأصلية
• تمرير الجدول باستخدام cycle.js
• قم بإنشاء قائمة التمرير اللانهائية باستخدام Bacon.js
• ترجمة تقريبية من لحم الخنزير المقدد اللانهائي إلى rxjs

لكن لدي شعور بأن المكون الإضافي الأصلي ( react-native-largelist ) هو الطريقة الصحيحة للذهاب.

شكرا لتقاسم البحث الخاص بك 👍

لأكون صادقًا ، ليس لدي الوقت الآن لاختبار كل هذا. إذا كنت ترغب في الغوص في react-native-largelist ، فسيكون ذلك مفيدًا للغاية. إذا لم يكن الأمر كذلك ، فلنتأكد من نشر بعضنا البعض ؛-)

تحديث: أثناء البحث عن تلك الروابط ، أدركت أن Tal Kol من wix.com لديها مدونة متوسطة جيدة حقًا. حتى الآن أحب جميع مقالاته. قد يكون هذا أيضًا مناسبًا لمناقشتنا:

• رد فعل على أداء ListView الأصلي - إعادة التدوير بدون الجسر
• BindingListView - التنفيذ التجريبي لـ ListView الأصلي الذي يدعم ربط العرض المباشر

@ bd-arc كذلك هنا ، لدي وظيفة يومية صعبة للغاية ووقتي ومواردي محدودة.
قد أنظر إلى BindingListView . لكن نعم: دعونا نبقي بعضنا البعض في الحلقة :)

نعم ، كتب Tal Kol بعض المقالات عالية الجودة حول React Native وتحسين الأداء.

أيضًا ، كنت مهتمًا بشكل خاص بالمكوِّن الإضافي لـ Wix react-native-interactable ، لكن للأسف لم يكن لديهم الوقت مؤخرًا لمعالجة بعض المشكلات المزعجة.

@ bd-arc ما هي مشكلة تمديد ScrollView recyclerlistview ScrollView ؟ يعتمد كلا من large-list و FlatList على نفس الشيء.
لقد كتبت recyclerlistview مؤخرًا ، استخدم فريقي هذا المكون الدائري. لقد استبدلنا FlatList بقائمة إعادة التدوير وهي تعمل بشكل رائع.

مرحبا naqvitalha ، شكرا

من تجربتي ، وحتى الآن ، كل شيء مبني على ScrollView يظهر في النهاية قيود الأداء عندما يكون هناك عدد كبير من العناصر للتعامل معها و / أو قيود الميزات. لكن كن مطمئنًا أن هدفي هو أن أكون مخطئًا ؛-)

هل أنت مهتم بتقديم علاقات عامة لهذا التطور بحيث يمكن اختباره على نطاق واسع وشامل؟

@ bd-arc بالتأكيد. دعني افعل ذلك.

naqvitalha @ bd-arc أي تحديثات حالة مع PR لاستبدال flatlist بـ recyclerlistview ؟ انا احب ان استخدمه

ليس له علاقة بـ ScrollView FlatList و recyclerlistview ، لكن هل نظر أي شخص في كيف يمكن لمعالج الإيماءات التفاعلي أن يحسن هذا lib؟

من المستندات:

باستخدام إيماءات المكتبة هذه لم يعد يتم التحكم فيها بواسطة نظام مستجيب JS ، ولكن بدلاً من ذلك يتم التعرف عليها وتتبعها في مؤشر ترابط واجهة المستخدم. إنه يجعل تفاعلات اللمس وتتبع الإيماءات ليس فقط سلسة ، ولكن أيضًا يمكن الاعتماد عليها وحتمية.

يتطلب react-native link ، وهو أمر مؤسف من حيث الحفاظ على تبعية lib مجانية. ولكن تم تضمينه الآن في Expo / CRNA.

مرحبًا @ pcooney10 ،

لقد فكرت سابقًا في تنفيذ PanResponder مخصص أعلى ScrollView / FlatList واحد (كما ترى في # 40).

هل جربت شيئًا مشابهًا باستخدام react-native-gesture-handler ؟ أرغب في الحصول على بعض التعليقات من أجل تحديد ما إذا كانت هذه فكرة مشروعة أو طريقة مباشرة للجنون ...

amitassaraf @ عقود هذا المكون تشبه إلى حد بعيد FlatList حيث يتم تمرير الدعائم إلى أسفل. لمزود تخطيط RLV إلزامي. سيكون تغييرًا جذريًا أو سنحتاج إلى تقديم وضع جديد.

مرحبًا بالجميع ، أريد مشاركة القليل من تجربتي باستخدام هذا المكون. كنت بحاجة إلى استخدامه داخل ScrollView مما أدى إلى ظهور مشكلة أن جميع العناصر ستظهر بأكثر مما تشير إلى الخاصية removeClippedSubviews لا يتم حذف العناصر من الذاكرة ، وإلا ، فإن كل مسار إنشاء عناصر جديدة تسببت في استنزاف التطبيق لذاكرة RAM في Android للحصول على التشغيل الصحيح للقائمة داخل ScrollView ( أو قائمة أخرى ) ، استخدم خصائص FlatList .

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

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

بناءً على حالتك ، يمكنك تكوين القيم التي تناسب احتياجاتك على أفضل وجه. بهذه الطريقة سيكون لديك الأداء المتوقع مع عدم وجود تسرب للذاكرة تقريبًا

@ ماشيستر 4 شكرا لتقاسم النتائج الخاصة بك! لن تتناسب هذه القيم مع حالة استخدام الجميع ، لكن النهج سليم ؛-)

يمكنك تطبيق هذا المنطق على قوائمك الأفقية الموجودة ضمن قائمة عمودية. في حالتي ، تحتوي جميع القوائم الأفقية على 3 عناصر مرئية في كل مرة. لهذا السبب ، فإن القيم هي maxToRenderPerBatch و initialNumToRender في 4 حيث أحصل على تجربة أفضل للمستخدم.

naqvitalha هل يمكنك مشاركة كيفية استبدال FlatList بـ RecylerView داخل المكتبة؟ أيضًا ، هل تدعم شيئًا مثل https://github.com/facebook/react-native/issues/20500 في RecyclerView؟

@ bd-arc تنبيه ، أنا متأكد من أن هذا سيؤثر على عملاء react-native-snap-carousel :
https://github.com/facebook/react-native/issues/21070

شكرًا على التنبيهPublicParadise!

FlatList لا يتوقف أبدًا عن الدهشة ... يبدو أن InteractionManager قد يعمل في مكان ما ، وبالتالي يؤجل تنفيذ منطق المكون.

حان الوقت بالتأكيد للتخلص من FlatList مقابل الخير :-)

مرحبا ، أي تحديثات في هذا المجال حتى الآن؟

في الواقع ، يحتوي FlatList في رأيي على ما يلزم ليصبح عنصر قائمة رائعًا حقًا.
كل ما ينقصه هو مفهوم "ارتفاع الصف المقدر" الذي UITableView على iOS.
لذلك لا تحتاج إلى خاصية "كم عدد الصفوف التي يجب أن أقوم بتخطيطها بشكل غير متزامن للقيام ببعض عمليات القرصنة والخداع".

كل ما نحتاجه ، كما قلت ، هو estimatedRowHeight (ربما مع رد اتصال للسماح بتقديرات مختلفة لكل صف ، ولكن لا يزال تقديرًا!).

• سيتم استخدام هذا لحساب حجم محتوى عرض التمرير.
• سيؤدي التمرير إلى إزاحة إلى التمرير إليه مباشرةً.
• كلما عرضت صفوفًا - قم بتخزين أحجامها مؤقتًا بعد وضعها.
• استخدم الأحجام المخزنة مؤقتًا + ارتفاعات الصف المقدرة لحساب الإزاحة لعنصر أو عنصر الإزاحة بسرعة.
• لا يمكننا أيضًا التفكير في التقديرات / ذاكرات التخزين المؤقت لجميع الصفوف قبل فهرس عنصر مرتفع جدًا ، فقط استخدم نوعًا من حجم النافذة وتقدير متوسط ​​للباقي.

لذلك سيتغير حجم المحتوى ديناميكيًا ولكن لن يهتم به أحد أو يشعر به ، حيث يمكنك التمرير إلى العنصر الأخير أو أي فهرس آخر وسيصل إلى هناك دون أخطاء ، ولن تقوم بالكثير من العمل الذي سيكون هناك العناصر المفقودة أثناء التمرير.

مرحبًا naqvitalha ، هل لديك فرع أو علاقات عامة على وشك ترحيل القائمة الثابتة إلى RLV لهذا المكون؟ سيكون مفيد جدا بالنسبة لي. شكر.

شكرا لك على تجربة المكون الخاص بي.

لجميع المشاهد تقريبًا ، يجب أن تفعل ذلك على النحو التالي:

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

وتأكد من احتواء جميع الآباء في Carousel على نمط { flex: 1 }.

انتبه لهذه النصيحة:

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

لا يمكن أن تعمل LargeList بشكل جيد إذا كنت تريد أن تدعم عناصرها حجم LargeList. يجب عليك تأكيد أن حجم LargeList الخاص بك موروث من الأصل أو من ارتفاع محدود.

اغفر لي لغتي الإنجليزية ، إذا كنت تفهم اللغة الصينية. تحقق من هذه القضية

المكوِّن FlatList هو مجرد فترة عربات التي تجرها الدواب.

قد تشكل هذه المكونات الإضافية بديلاً مثيرًا للاهتمام:

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

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

احسنت القول