لماذا تحولت إلى React Native لإنشاء ورقة سفلية (Bottom Sheet) بمنتهى السهولة؟

مقدمة: تبسيط إنشاء الـ Bottom Sheet باستخدام React Native

في عالم تطوير تطبيقات الهواتف الذكية، تُعد ورقة العمل السفلية (Bottom Sheet) مكونًا أساسيًا وشائع الاستخدام. إنها لوحة تنزلق من أسفل الشاشة لتقديم خيارات إضافية أو معلومات سياقية للمستخدم، وتُستخدم بكثرة في تطبيقات مثل Uber و Zomato وغيرها الكثير. لطالما كان إنشاء هذا المكون في بيئات التطوير الأصلية، مثل Native Android، يتطلب جهدًا كبيرًا وعملًا معقدًا.

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

إليكم لمحة عما سيبدو عليه المنتج النهائي:

البدء: إعداد مشروع React Native

للبدء، سنقوم بإنشاء مشروع جديد في React Native. في هذا الدليل، سأستخدم expo-cli لتسهيل العملية. إذا كنت غير مطلع على expo-cli أو بدأت للتو في استخدام React Native، يمكنك البحث عن المزيد من المعلومات حوله. لقد أسميت مشروعي BottomSheetDemo.

تثبيت مكتبة react-native-modalbox

الخطوة التالية تتطلب تثبيت مكتبة react-native-modalbox. توفر هذه المكتبة العديد من الإمكانيات المدمجة مثل الرسوم المتحركة، تحديد المواقع، والخلفيات (backdrops) وغيرها الكثير، مما يسهل علينا بناء الـ Bottom Sheet.

$ expo install react-native-modalbox@1.7.1

ملاحظة هامة: تأكد من تثبيت الإصدار 1.7.1. الإصدارات الأحدث قد تحتوي على خطأ يمنع خاصية backdropPressToClose من العمل بشكل صحيح.

بناء المودال (Modal) الأساسي

حان الوقت لإنشاء المودال الخاص بنا. قم بإزالة الكود الافتراضي الذي يأتي مع المشروع الجديد، وأضف الكود التالي إلى ملف App.js الخاص بك:

يمثل هذا الكود الهيكل الأساسي لـ Bottom Sheet أو المودال. في هذه المرحلة، سنقوم فقط بعرض نص بسيط في منتصف المودال.

إضافة التفاعل: إظهار وإخفاء الـ Bottom Sheet

نحتاج إلى جعل الـ Bottom Sheet يظهر عند الضغط على زر معين. لنضف بعض التفاعل إلى تطبيقنا. سأقوم بإضافة زر بسيط في منتصف الشاشة:

عند النقر على هذا الزر، نحتاج إلى إظهار أو إخفاء الـ Bottom Sheet. لتحقيق ذلك، سنقوم بإدارة حالة (state) باستخدام خطاف useState من React.

يحتوي المودال الخاص بنا على خاصية (prop) تُسمى isOpen يمكننا تبديلها لإظهار أو إخفاء الـ Bottom Sheet. لإظهاره، سنقوم ببساطة بتعيين modalVisible إلى true والعكس صحيح لإخفائه.

تنظيم الكود: فصل المودال في دالة منفصلة

قبل المضي قدمًا، دعنا نفصل المودال الخاص بنا عن بقية الكود، حيث بدأ يصبح الكود أكثر فوضوية. سأقوم بإنشاء دالة منفصلة تعيد المودال الخاص بي:

الآن يبدو الكود أنظف وأكثر تنظيمًا بكثير. لكن الـ Bottom Sheet الخاص بنا لا يزال لا يبدو تمامًا كورقة سفلية. نحتاج إلى إضافة بعض التنسيقات.

إضافة التنسيقات (Styling)

لنقم بإنشاء ورقة أنماط (stylesheet) وإضافة التنسيقات التالية إليها لجعل الـ Bottom Sheet يبدو احترافيًا وجذابًا:

وهنا الشكل النهائي للكود بعد إضافة جميع التنسيقات:

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

الخلاصة التقنية

يُظهر هذا الدليل بوضوح كيف يمكن لـ React Native تبسيط عملية تطوير مكونات واجهة المستخدم المعقدة مثل الـ Bottom Sheet. باستخدام مكتبات جاهزة مثل react-native-modalbox، يمكن للمطورين توفير وقت وجهد كبيرين مقارنةً بالتطوير الأصلي. إن سهولة دمج التفاعلات وإدارة الحالة والتنسيقات في بيئة React Native تجعلها خيارًا ممتازًا لإنشاء واجهات مستخدم غنية وتفاعلية عبر منصات متعددة بكفاءة عالية. هذه المرونة والإنتاجية هي جوهر ما يجعل React Native أداة قوية في ترسانة المطورين.