recyclerlistview
Version 4.2.1
إذا كان هذا المشروع قد ساعدك على الخروج ، فيرجى دعمنا بنجم؟
هذه مقابلة عالية الأداء لـ React Native و Web بدعم للتخطيطات المعقدة. JS فقط مع عدم وجود تبعيات أصلية ، مستوحاة من كل من Recyclerview على Android و UicollectionView على iOS.
npm install --save recyclerlistview
لأحدث النسخة التجريبية:
npm install --save recyclerlistview@beta
ملاحظة: سيتم ترقية الوثائق قريبًا ، حتى الآن تحقق من تعليقات الرمز من أجل الوضوح واستكشاف الميزات. يتم اختبار هذا المكون بنشاط مع WEB Native React أيضًا.
يستخدم RecyClerListView "إعادة تدوير الخلايا" لإعادة استخدام المشاهدات التي لم تعد مرئية لتقديم العناصر بدلاً من إنشاء كائنات عرض جديدة. يعد إنشاء كائنات مكلفًا للغاية ويأتي مع وجود ذاكرة عامة مما يعني أنك تمرير عبر قائمة البصمة التي تستمر بصمة الذاكرة. إن إطلاق العناصر غير المرئية خارج الذاكرة هو تقنية أخرى ، لكن هذا يؤدي إلى إنشاء المزيد من الكائنات والكثير من مجموعات القمامة. إعادة التدوير هي أفضل طريقة لتقديم قوائم لا حصر لها لا تساوم الأداء أو كفاءة الذاكرة.
بصرف النظر عن جميع مزايا الأداء ، يأتي RecyclerListView مع ميزات رائعة خارج الصندوق:
forceNonDeterministicRendering )تم بناء RecyClerListView مع وضع الأداء في الاعتبار مما يعني عدم وجود فراغات أثناء لفائف سريعة أو قطرات الإطار. يشجعك RecyClerListView على الحصول على ارتفاعات حتمية للعناصر التي تحتاج إلى تقديمها. هذا لا يعني أنك تحتاج إلى الحصول على جميع عناصر من نفس الارتفاع والأشياء ، كل ما تحتاجه هو وسيلة للنظر في البيانات وحساب الارتفاع مقدمًا حتى يتمكن RecyclerListView من حساب التخطيط في ممر واحد بدلاً من انتظار السحب. لا يزال بإمكانك القيام بجميع أنواع المشاهدين ورسومات ListViews مع أنواع مختلفة من العناصر التي يتم إعادة تدويرها جميعًا بطرق مثالية. من السهل جدًا القيام بإعادة التدوير المستندة إلى النوع ويخرج من الصندوق.
في حال لم تتمكن من تحديد ارتفاعات العناصر مقدمًا ، فقط قم بتعيين forceNonDeterministicRendering Prop to true على RecyClerListView. الآن ، سوف يعالج الأبعاد المعطاة كتقديرات وتدع العناصر تغيير حجمها. حاول تقديم تقديرات جيدة لتحسين الخبرة.
إنتاج الفيديو التجريبي للبقالة Flipkart (أو جرب التطبيق): https://youtu.be/6yqeqp3mmou
تغيير/عرض لا حصر له (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
الأنواع المختلطة: https://snack.expo.io/b1gyad52b
ExtendedState ، Stableids و ItemAnimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
عينة المشروع: https://github.com/naqvitalha/travelmate
عينة الويب (باستخدام RNW): https://codesandbox.io/s/k54j2zx977 ، https://jolly-engelbart-8ff0d0.netlify.com/
عينة الحفاظ على السياق: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
فيديو آخر: https://www.youtube.com/watch؟v=tnv4hmmpgmc
| دعم | مطلوب | نوع المعلمة | وصف |
|---|---|---|---|
| LayoutProvider | نعم | BaselayoutProvider | وظيفة المنشئ التي تحدد التصميم (الارتفاع / العرض) لكل عنصر |
| Dataprovider | نعم | Dataprovider | وظيفة المنشئ تحدد البيانات لكل عنصر |
| ContextProvider | لا | ContextProvider | تستخدم للحفاظ على وضع التمرير في حالة عرض حالة العرض ، والذي يحدث غالبًا مع التنقل الخلفي |
| Rowrenderer | نعم | (النوع: سلسلة | رقم ، البيانات: أي ، فهرس: رقم) => jsx.element | JSX.Element [] | باطل | الطريقة التي تُرجع مكون رد الفعل ليتم تقديمه. يمكنك الحصول على النوع والبيانات والفهرس وتوسيع نطاق العرض في رد الاتصال |
| initialoffset | لا | رقم | الإزاحة الأولية التي تريد البدء في التقديم منها ؛ هذا مفيد جدًا إذا كنت ترغب في الحفاظ على سياق التمرير عبر الصفحات. |
| Renderaheadoffset | لا | رقم | حدد عدد وحدات البكسل مسبقًا تريد أن يتم تقديم طرق العرض. زيادة هذه القيمة يمكن أن تساعد في تقليل الفراغات (إن وجدت). ومع ذلك ، فإن الحفاظ على هذا منخفض قدر الإمكان يجب أن يكون القصد. تؤدي القيم الأعلى أيضًا إلى زيادة حساب إعادة تقديم العروض |
| Ishorizontal | لا | منطقية | إذا كان صحيحًا ، ستعمل القائمة أفقيًا وليس رأسيًا |
| onscroll | لا | Rawevent: Mashrolvent ، OffsetX: Number ، Offety: Number) => void | على وظيفة رد اتصال التمرير التي تنفذ كقائف مستخدم |
| onrecreate | لا | (params: onRecreateParams) => void | وظيفة رد الاتصال التي يتم تنفيذها عند إعادة إنشاء عرض إعادة التدوير من مزود السياق |
| externalscrollview | لا | {جديد (الدعائم: ScrollViewDefaultProps): BasesCrollView} | استخدم هذا لتمرير تنفيذ BasesCrollView |
| بيلها | لا | () => باطلة | تم تنفيذ وظيفة رد الاتصال عندما يتم ضرب نهاية العرض (ناقصًا مرجعًا إذا تم تعريفه) |
| بطيئة | لا | رقم | حدد عدد البكسل مقدمًا للاستدعاء الذي تم إلحاقه |
| بطيئة | لا | رقم | حدد مدى المسافة عن النهاية (في وحدات الطول المرئي للقائمة) يجب أن تكون الحافة السفلية للقائمة من نهاية المحتوى لتشغيل رد الاتصال الذي تم إلحاقه |
| onvisibleIndiceschanged | لا | TonitemStatusCchanged | يوفر فهرس مرئي. مفيد في إرسال أحداث الانطباع |
| onvisibleIndexeschanged | لا | TonitemStatusCchanged | (تم إهماله في 2.0 بيتا) يوفر فهرسًا مرئيًا ؛ مفيد في إرسال أحداث الانطباع |
| RenderFooter | لا | () => jsx.element | JSX.Element [] | باطل | قدم هذه الطريقة إذا كنت ترغب في تقديم تذييل. مفيد في إظهار محمله أثناء إجراء أحمال تدريجية |
| initiallyRenderIndex | لا | رقم | حدد فهرس العنصر الأولي الذي تريد تقديمه للبدء من. يفضل على inialoffset إذا تم تحديد كلاهما |
| Scrollthrottle | لا | رقم | iOS فقط ؛ التمرير الخانق مدة |
| Canchangesize | لا | منطقية | حدد ما إذا كان الحجم يمكن أن يتغير |
| المسافة منفوردودو | لا | رقم | (depricated) استخدم applyWindowCorrection() API مع windowShift . الاستخدام؟ |
| ApplyWindowcorrection | لا | (الإزاحة: الرقم ، تصحيح النوافذ: Windowscorrection) => void | (تعزيز/استبدال إلى API distanceFromWindow ) يسمح بتحديث النوافذ المرئية بناءً على القيم الإصلاحية التي تم تمريرها. يمكن للمستخدم تحديد WindowShift ؛ في حالة حاجة RESYCLERLISTWINDOW بأكملها إلى التحول/الأعلى ، ابدأ في التصحيح ؛ في حالة حاجة إلى تحويل ملزمة النافذة العلوية إلى النافذة العليا ، فإن المحتوى يتجول في المحتوى يتداخل مع الحافة العلوية من RecyClerListView ، التصحيح النهائي : لتغيير النافذة السفلية ملزمة لحالة استخدام مماثلة. الاستخدام؟ |
| useWindowsCroll | لا | منطقية | الويب فقط ؛ عناصر التخطيط في النافذة بدلاً من div القابلة للتمرير |
| تعطيل التدوير | لا | منطقية | إيقاف إعادة التدوير |
| forcenondeterministicrendering | لا | منطقية | الافتراضي كاذب. إذا لم يتم تطبيق أبعاد ممكّنة في مزود التخطيط. استخدم هذا إذا كان لا يمكن تحديد أبعاد العنصر بدقة |
| ExtendedState | لا | هدف | في بعض الحالات ، قد لا تحتوي البيانات التي تم تمريرها على مستوى الصف على جميع المعلومات التي يعتمد عليها العنصر ، يمكنك الاحتفاظ بجميع المعلومات الأخرى في الخارج وتمريرها عبر هذا الدعامة. سيؤدي تغيير هذا الكائن إلى إعادة عرض كل شيء. تأكد من عدم تغييره في كثير من الأحيان لضمان الأداء. إعادة البيع ثقيلة. |
| ItemAnimator | لا | ItemAnimator | يمكّن خلايا العناصر الخاصة بـ RecyClerListView (Shift ، Add ، إزالة ، إلخ) |
| أسلوب | لا | هدف | لتمرير النمط إلى Scrollview الداخلي |
| ScrollViewProps | لا | هدف | لجميع الدعائم التي تحتاج إلى أن يتم تقديمها إلى Scrollview الداخلية/الخارجية. ضعها في كائن وسيتم نشرها وينتقلون. |
| تخطيط | لا | البعد | سيمنع العرض الفارغ الأولي المطلوب لحساب حجم ListView واستخدام هذه الأبعاد لتقديم عناصر القائمة في العرض الأول نفسه. هذا مفيد لحالات مثل تقديم جانب الخادم. يجب ضبط Prop CanChangesize على صحيح إذا كان يمكن تغيير الحجم بعد التقديم. لاحظ أن هذا ليس حجم عرض التمرير ويستخدم فقط للتخطيط. |
| OniteMlayout | لا | رقم | تم تخطيط دالة رد الاتصال التي يتم تنفيذها عند تخطيط عنصر من RecyClerListView (في فهرس). يمكن استخدام هذا أيضًا كبديل لنوع من عمليات الاسترجاعات. |
| WindowCorrectionConfig | لا | هدف | يستخدم لتحديد تكوين تصحيح النافذة وما إذا كان ينبغي تطبيقه على بعض أحداث التمرير |
لمجموعة الميزات الكاملة ، إلقاء نظرة على تعريفات الدعامة لـ RecyClerListView (أسفل الملف). جميع ميزات ScrollView مثل RefreshControl تعمل أيضًا خارج المربع.
يتم استخدام applyWindowCorrection لتغيير حدود النافذة المرئية من RecyClerListView ديناميكيًا. يتم تعريض Windowscrection of RecyClerListView جنبًا إلى جنب مع إزاحة التمرير الحالية للمستخدم. يتكون كائن windowCorrection من 3 قيم رقمية:
windowShift - الاستبدال المباشر لمعلمة distanceFromWindow . تحول النافذة هو قيمة الإزاحة التي يتم من خلالها نزوح RecyClerListView ككل داخل StickyContainer ، استخدم هذا المعلمة لتحديد مدى بعيد عن عنصر القائمة الأول من أعلى النافذة. تقوم هذه القيمة بتصحيح تعويضات التمرير للـ stickyObjects وكذلك RecyClerListView.startCorrection - يتم استخدام عملية بدء التشغيل لتحديد التحول في النافذة المرئية العلوية ، والتي يمكن للمستخدم استلام مثيل الرأس اللزج الصحيح حتى عندما يكون عامل أدوات من CoordinatorLayout.endCorrection - يتم استخدام التصحيح النهائي لتحديد التحول في النافذة المرئية السفلية ، والتي يمكن للمستخدم الحصول عليها مثيل التذييل اللزج الصحيح عندما يقوم عامل خارجي مثل شريط التطبيق السفلي بتغيير ربط العرض المرئي.كما هو موضح في المثال أدناه
TypeScript يعمل خارج الصندوق. التنفيذ الوحيد هو مع الدعائم الموروثة Scrollview. لكي تعمل TypeScript مع الدعائم الموروثة ، يجب عليك وضع الدعائم الموروثة في ScrollViewProps Prop.
< 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 على سبيل المثال ، import { RecyclerListView } from "recyclerlistview/web" . استخدم الأسماء المستعارة إذا كنت تريد الحفاظ على مسار الاستيراد. رمز معين فقط من النظام الأساسي هو جزء من الإنشاء ، لذلك لن يتم شحن رمز غير ضروري مع تطبيقك.requestAnimationFrame ، ResizeObserver Apache v2.0
يرجى فتح المشكلات لأي أخطاء تواجهها. يمكنك التواصل معي على twitternaqvitalha أو الكتابة إلى [email protected] للحصول على أي أسئلة قد تكون لديك.
