كيفية إنشاء قائمة درج متداخلة باستخدام React Native

مساحة الشاشة سلعة ثمينة على الهاتف المحمول. تعد قائمة الدرج (أو "قائمة الهامبرغر") واحدة من أكثر أنماط التنقل شيوعًا والتي تساعدك على حفظها مع توفير تنقل سهل. في هذا المنشور ، سأزيل الغموض عن كيفية إنشاء قائمة درج متداخلة (متعددة المستويات) باستخدام React Native و React Navigation. ؟

جرب العرض التوضيحي المباشر على الهاتف المحمول أو على الويب. ؟

التنقل في React Native ⚛️

يشكل التنقل العمود الفقري لغالبية كبيرة من التطبيقات المصممة للإنتاج. يُعد شكل وملمس التنقل مهمين لقيادة الاستخدام والمشاركة في تطبيقات الأجهزة المحمولة.

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

لا تدعم أي من مكتبات التنقل حاليًا الأدراج المتداخلة خارج الصندوق. لكن إحدى المكتبات التي توفر واجهة برمجة تطبيقات غنية لإنشاء حلول مخصصة هي React Navigation - تنقل قائم على JavaScript. يتم دعمها وصيانتها بقوة من قبل مجتمع React Native. هذا ما سنستخدمه في هذا البرنامج التعليمي.

حالة الاستخدام؟

اضطررت إلى إنشاء تطبيق ملعب لعرض مكتبة مكونات واجهة المستخدم لـ React Native. يتكون من ثمانية مكونات مختلفة ، كل منها يدعم الدعائم المختلفة ، وأكثر من 50 خيارًا مختلفًا.

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

الإعداد الأساسي؟

بالنسبة للإعداد الأساسي ، أفترض أن لديك بالفعل إعداد مشروع React Native إما باستخدام CRNA أو Expo Kit أو React Native CLI. تأكد من تثبيت مكتبة تصفح التفاعل باستخدام الغزل أو npm. سنبدأ على الفور باستخدام واجهة برمجة تطبيقات التنقل.

لا تتردد في مراجعة دليل البدء قبل المتابعة إذا لم تكن على دراية بـ React Navigation API.

سنبدأ بمثال مشابه للمثال الموثق في الدليل الرسمي DrawerNavigator الخاص بـ React Navigation. سننشئ درجًا بسيطًا يحتوي على عنصرين للدرج: المنزل والإشعارات.

محتوى درج مخصص

يُمكّن React Navigation جميع الملاحين من إجراء الكثير من التخصيصات عن طريق تمرير تهيئة الملاح كمعامل ثانٍ. سنستخدمه لتقديم بعض المحتويات المخصصة بخلاف عناصر درج المخزون.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

سنقوم بتمرير خاصية تسمى contentComponentالتكوين والتي تسمح لنا بتقديم محتوى مخصص للدرج. سنستخدم ذلك لإظهار رأس وتذييل مع العنصر السائد DrawerItemsمن react-navigation.

من المحتمل أن يفتح هذا الكثير من الأشياء التي يمكن القيام بها من خلال التحكم في ما سيتم عرضه داخل الدرج.

إنشاء تعيين الشاشة

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

يتكون تعيين الشاشة من كائنات بسيطة مع خاصية الشاشة. و screenMappingجوه يبدو شيئا من هذا القبيل:

بعد تسجيل جميع المكونات ، سيبدو الدرج كما يلي:

هذا من شأنه أن يجعل جميع المكونات مع خياراتها. لدينا مكونان رئيسيان: DataSearch و TextField. يحتوي كل منها على خيارات مثل "With Icon Position" و "With Placeholder" والمزيد. مهمتنا هي فصل هذه في قائمة المكونات فقط (DataSearch ، TextField).

تجميع الدرج الخارجي

كان النمط الذي اتبعته في التعيين هو استخدام محدد _لتجميع الخيارات معًا من مكون واحد. على سبيل المثال ، كانت مفاتيح التنقل التي استخدمتها هي "DataSearch_Basic" و "DataSearch_With Icon Position". هذا هو بالضبط ما سيساعدنا في دمج الخيارات لمكون واحد مثل DataSearch. سنقيم بشكل فريد كل المكونات التي نحتاج إلى إظهارها للدرج الخارجي.

سننشئ دالة استخدام لتقييم عناصر قائمة الأدراج الخارجية المراد عرضها.

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

و renderMainDrawerComponentهو مجرد وظيفة بالتكرار عبر مفاتيح الكائن المكونات. إنه يعرض عناصر الدرج الخارجي المخصصة المبنية فوقها ببساطة Textومن Viewتفاعلية. تحقق من الكود الكامل هنا.

هذا سيجعل الدرج مثل هذا:

جعل درج الطفل؟

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

على سبيل المثال، شاشات DataSearch تبدأ في الفهرس 1 (الرقم القياسي 0 هو الشاشة الرئيسية) وينتهي في 3. يبدأ الحقل النصي في 3 و نهاية في 5. سنستخدم هذه المؤشرات لشريحة سحرية itemsالتي تم تمريرها إلى DrawerItemsعلى أساس العنصر المحدد و مؤشراته.

الآن ، بعد النقر على DataSearch ، سينتج عن الدرج شيء مثل هذا:

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

الآن ، الشيء الوحيد المتبقي هو جعل عناصر الدرج تبدو أنظف من خلال قص اسم المكون الزائد. مرة أخرى ، تأتي واجهة برمجة التطبيقات الغنية بـ React Navigation سهلة الاستخدام هنا.

هناك العديد من الخصائص التي يمكننا المرور بها navigationOptions. واحد معين سنستخدمه هنا هو titleالدعامة مع تعيين الشاشة. سيسمح لنا هذا بإزالة الجزء قبل المحدد الأول. لذلك ، سيتم عرض "DataSearch_Basic" كـ "أساسي" فقط.

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

هذا هو الرابط إلى التطبيق النهائي وقاعدة التعليمات البرمجية.

ملخص ؟

  • إعداد القاعدة : DrawerNavigation hello world من المستندات.
  • محتوى الدرج المخصص : عرض عناصر الدرج باستخدام contentComponent.
  • تعيين الشاشة : تحديد وتسجيل جميع مكونات الأدراج.
  • تجميع الدرج الخارجي : قراءة نمط المحدد لتجميع عناصر الدرج.
  • تصيير درج الطفل : قم بتقطيع عناصر درج الأطفال إلى شرائح وعرضها.

استنتاج ؟

لقد تعلمنا إنشاء قائمة أدراج متعددة المستويات باستخدام React Native. استخدمنا React Navigation API لعرض مكون محتوى مخصص داخل الدرج ، واستخدمنا نمط المحدد لتعيين الشاشة. استخدم هذا النمط لبناء أي مستوى من التداخل أو العرض الشرطي للأدراج.

البحث التفاعلي؟

يوفر مكونات واجهة المستخدم للنظام الأساسي الأصلي والويب لإنشاء تجارب بحث مثالية. يمكنك التحقق من جميع المكونات التي يقدمها من خلال اللعب باستخدام تطبيق playground نفسه أو عن طريق إنشاء المكون الخاص بك.

appbaseio / رد الفعل

رد الفعل - مكتبة مكونات واجهة المستخدم الأصلية للتفاعل والتفاعل لبناء تطبيقات تعتمد على البيانات github.com