كيفية استخدام مكون FlatList - أساسيات رد الفعل الأصلية

كانت هناك عدة طرق لإنشاء قائمة التمرير في React Native ، وعلى الأخص أنها كانت ScrollView و ListView. لكل منها نقاط القوة والضعف. منذ الإصدار v0.43 من React Native ، أصبح بإمكاننا الوصول إلى طريقتي عرض قائمتين جديدتين ، قائمة FlatList و SectionList. اليوم سوف نلقي نظرة على كيفية استخدام مكون FlatList.

ما هذا؟

ما هو المكون FlatList؟ إنها طريقة سهلة لإنشاء قائمة بيانات فعالة للتمرير. إنها ليست فعالة فحسب ، بل إنها تمتلك واجهة برمجة تطبيقات بسيطة بشكل لا يصدق للعمل معه. إذا كنت تستخدم مكون ListView أو كنت على دراية به ، فهو مشابه جدًا ، أفضل من ذلك (تقريبًا) بكل طريقة. لم يعد لديك لتنسيق البيانات - يمكنك فقط تمرير مجموعة من البيانات والحصول على التقديم على الفور.

تفضل الفيديو؟ راجع هذا البرنامج التعليمي على YouTube واشترك فيه أثناء وجودك هناك!

الاستخدام الأساسي

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

ستأتي البيانات من واجهة برمجة تطبيقات Random User Generator وسيتم استخدام React Native Elements للواجهة.

شفرة المصدر الكاملة متاحة على جيثب.

في النموذج المرجعي لهذا البرنامج التعليمي ، سيقوم التطبيق بتقديم طلب إلى Random User Generator API وتخزين الاستجابة من ذلك في حالة المكون. تصفح الكود أدناه للحصول على فهم لذلك.

ستشير أيضًا إلى ملفات index.ios.js و index.android.js للإشارة إلى ملف FlatListDemo.js الذي أنشأته.

بعد الانتهاء من ذلك ، يمكنك المضي قدمًا والبدء فعلًا في تقديم البيانات. للقيام بذلك ، فإن أول ما تريد القيام به هو استيراد {List، ListItem} من "react-native-elements"؛ لذلك لديك المكونات اللازمة لتقديم البيانات. سيتم بقية العمل في طريقة العرض. أول السقالات:

تحتاج الآن إلى تمرير مجموعة من البيانات إلى FlatList عبر دعم البيانات. هذا متاح على this.state.data.

ثم تريد تقديم المحتوى باستخدام renderItem prop. يتم تمرير الدالة وسيطة واحدة ، وهو كائن. البيانات التي تهتم بها موجودة على مفتاح العنصر بحيث يمكنك استخدام التدمير للوصول إلى ذلك من داخل الوظيفة. ثم قم بإرجاع مكون باستخدام هذه البيانات.

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

لاحظ هذا الخطأ في الأسفل؟ هذا تحذير بأن عناصر القائمة مفقودة بالمفاتيح. هذه المفاتيح الفريدة هي ما يسمح لـ VirtualizedList (وهو ما تستند إليه FlatList) بتتبع العناصر والمساعدة في كفاءة القائمة. أنا لن أغوص فيه ولكن أعرف فقط أنه مهم.

لتخفيف هذه المشكلة ، تريد اختيار جزء من البيانات فريد لكل عنصر. في هذه الحالة ، يمكنك استخدام عنوان البريد الإلكتروني للمستخدم لأن ذلك سيكون فريدًا لكل عنصر. يمكنك حينئذٍ استخدام مفتاح keyExtractor prop لتحديد أي جزء من البيانات يجب استخدامه كمفتاح.

الآن التحذير لم يعد يظهر.

لا مزيد من الخطأ!

الفاصل

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

في هذا المثال ، أول ما عليك فعله هو إزالة جميع الحدود في التطبيق.

تريد بعد ذلك إنشاء مكون فاصل. الأمر بسيط للغاية ولكن بدلاً من أن يكون العرض الكامل للشاشة ، سيبدأ (تقريبًا) في بدء النص.

ثم يمكنك المتابعة واستخدام ذلك ببساطة عن طريق إضافة ItemSeparatorComponent = {this.renderSeparator} إلى مكون FlatList.

تركك مع شيء مثل هذا. لاحظ أنه في أعلى وأسفل القائمة ، لا يتم عرض فاصل.

رأس

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

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

تريد بعد ذلك تقديم هذا الرأس باستخدام دعامة ListHeaderComponent على FlatList.

تركك مع ما يلي ...

تذييل

تذييل الصفحة هو نفسه تمامًا مثل Header ، تمامًا في نهاية القائمة بدلاً من البداية. سيكون هذا التذييل أكثر تعقيدًا من المثال السابق (إعداده للتمرير اللانهائي) ولكن نفس المبادئ تنطبق. قم أولاً بإنشاء طريقة لاستدعاء تذييل الصفحة وإرجاع مكون.

ثم استدعاء هذه الوظيفة من ListFooterComponent.

هذا يتركك بشيء من هذا القبيل (لقد عدلت الشفرة قليلاً للتأكد من أنك تستطيع رؤية ActivityIndicator).

سحب لتحديث

التدرج اللانهائي

وآمل أن يتمتع هذا البرنامج التعليمي! إذا كنت مهتمًا ببناء أول تطبيق React Native لديك أو توطيد معرفتك الأساسية ، فابحث عن دورة React Native المجانية!