react native big list

إذا كان هذا المشروع قد ساعدك على الخروج ، فيرجى دعمنا بنجم؟

الوثائق

وصف

ما هذا؟

هذا عرض قائمة عالية الأداء لـ React Native مع دعم التخطيطات المعقدة باستخدام استخدام قائمة مسطحة مماثلة لتسهيل الاستبدال. يركز تطبيق القائمة على القائمة الكبرى على أعمال React Native مع إعادة التدوير على الأداء واستخدام الذاكرة وبالتالي يسمح بمعالجة الآلاف من العناصر في القائمة.

يمكنك أيضًا تجربته على تطبيق الويب المنشور: العرض التوضيحي

لماذا مكتبة قائمة أخرى؟

تعتبر قائمة REACT Native's Flatile رائعة ، لكن عندما يتعلق الأمر بالقوائم الكبيرة ، فإنها تحتوي على بعض العيوب بسبب التخزين المؤقت للبند. موجود بعض البدائل مثل react-native-largelist و recyclerlistview ولكن كلاهما يعاني من بعض المشكلات.

لا يتوافق react-native-largelist مع الويب والمعرض ، ولديه رمز أصلي يحتاج أحيانًا إلى إعادة ضبطه وصيانته ، ولديه إعادة تدوير قائمة غريبة (لأنه لا يحتوي على عناصر فارغة أبدًا) ، ويحتاج إلى إعادة هيكلة البيانات ولديها بعض المشكلات عند محاولة معالجة الكثير من البيانات (على سبيل المثال: 100،000 عنصر) لأنها ستجنب وحدة المعالجة المركزية.

يعد recyclerlistview أداءً ولكنه يعاني من إطار فارغ على Mount ، ومواقع التمرير الغريبة عند محاولة التمرير إلى عنصر على Mount ، ويتعارض تنفيذ الرؤوس اللزجة مع Animated .

كيف يعمل؟

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

عندما لا تستطيع القائمة تقديم العناصر الخاصة بك بسرعة كافية ، ستظهر المكونات غير المقيدة كمساحة فارغة.

هذه المكتبة محلية تمامًا ، لذا فهي متوافقة مع جميع الأنظمة الأساسية المتاحة: Android و iOS و Windows و MacOS و Web و Expo .

ثَبَّتَ

قم بتثبيت المكتبة من NPM أو الغزل فقط تشغيل أحد أسطر الأوامر التالية:

NPM	غزل
npm install react-native-big-list --save	yarn add react-native-big-list

الاستخدام

اقرأ أيضًا كيفية الترحيل من القائمة المسطحة

مثال أساسي:

 import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
  const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
  return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ;

لمزيد من الأمثلة ، تحقق من دليل example دليل list أو تحقق من الوثائق

؟ لقطات الشاشة

BigList vs Flatlist	قائمة القسم

⚡ مثال

قصاصات

• قائمة قياسية
• قائمة الأعمدة
• قائمة الأقسام

معرض

استنساخ أو تنزيل الريبو وبعد:

 cd Example
yarn install # or npm install
expo start

افتح عميل المعرض على جهازك. استخدمه لمسح رمز الاستجابة السريعة المطبوعة حسب expo start . قد تضطر إلى الانتظار لمدة دقيقة بينما يحزم مشروعك وأحماله لأول مرة.

يمكنك أيضًا تجربته على تطبيق الويب المنشور: العرض التوضيحي

الدعائم والأساليب

تحتوي القائمة على نفس الدعائم من ScrollView بالإضافة إلى الدعائم والأساليب المحددة.

؟ كيفية المساهمة

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