مقدمة

React Native هو إطار عمل قوي لبناء تطبيقات الهاتف المحمول باستخدام JavaScript وReact. أثناء تعمقك في التطوير باستخدام React Native، من الضروري فهم بنية مشروع React Native النموذجي. كل مجلد وملف له غرض محدد، ومعرفة أدوارهم ستساعدك على إدارة مشروعك والتنقل فيه بكفاءة أكبر. توفر هذه المقالة نظرة عامة شاملة على بنية مجلد تطبيق React Native، مع التركيز على محتويات وأغراض الأدلة الرئيسية: الدليل الجذر، ومجلد android/، ومجلد ios/.

دليل الجذر

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

الملفات والمجلدات الرئيسية

• node_modules/: يحتوي على جميع التبعيات والتبعيات الفرعية المثبتة عبر npm أو الغزل. عادةً، لن تحتاج إلى لمس هذا المجلد مباشرة.
• package.json: يسرد تبعيات مشروعك والبرامج النصية والبيانات الوصفية الأخرى. إنه أمر بالغ الأهمية لإدارة تبعيات المشروع والبرامج النصية.
• package-lock.json أو Yarn.lock: لتأمين إصدارات التبعيات المثبتة، مما يضمن الاتساق عبر البيئات المختلفة.
• index.js: نقطة الدخول لتطبيق React Native، وعادة ما يتم تسجيل المكون الرئيسي للتطبيق.

المجلدات الأساسية

• android/: يحتوي على كود Android الأصلي وملفات التكوين، وهو ضروري إذا كنت بحاجة إلى كتابة كود Android الأصلي أو تعديله.
• ios/: يحتوي على كود iOS الأصلي وملفات التكوين، الضرورية لكتابة أو تعديل كود iOS الأصلي.
• app/ أو src/: غالبًا ما يكون المجلد الرئيسي لتعليمات JavaScript/TypeScript البرمجية، مثل المكونات والشاشات والخدمات. هذا هو المكان الذي توجد فيه معظم أكواد تطبيقك.

المجلدات الفرعية المشتركة (داخل التطبيق/ أو src/)

• المكونات/: مكونات واجهة المستخدم القابلة لإعادة الاستخدام، مما يساعد على تنظيم عناصر واجهة المستخدم وإعادة استخدامها عبر أجزاء مختلفة من التطبيق.
• شاشات/: مكونات تمثل شاشات أو طرق عرض مختلفة، مما يسهل إدارة التنقل والشاشات الفردية.
• التنقلات/: تكوين التنقل ومكوناته، يُستخدم لتحديد بنية التنقل في التطبيق.
• الأصول/: الصور والخطوط والأصول الثابتة الأخرى، مع الحفاظ على تنظيم جميع الموارد الثابتة.
• redux/ (في حالة استخدام Redux لإدارة الحالة): الإجراءات والمخفضات وتكوين المتجر لإدارة الحالة العامة للتطبيق.
• styles/: الأنماط الشائعة المستخدمة عبر المكونات والشاشات، مما يساعد في الحفاظ على تصميم متسق وتبسيط إدارة الأنماط.

ملفات التكوين والأدوات المساعدة

• .babelrc أو babel.config.js: ملف تكوين Babel، يحدد كيفية قيام Babel بنقل التعليمات البرمجية الخاصة بك.
• .eslintrc.js: ملف تكوين ESLint، إعداد قواعد الفحص لمشروعك.
• .prettierrc: ملف تكوين أجمل، تكوين قواعد تنسيق التعليمات البرمجية.
• metro.config.js: ملف التكوين لمحزمة Metro، حزمة JavaScript المستخدمة بواسطة React Native.
• .gitignore: يحدد الملفات والأدلة التي يجب تجاهلها في مستودع git الخاص بك.

الروبوت/ المجلد

يحتوي المجلد android/ على كافة أكواد Android الأصلية وملفات التكوين اللازمة لإنشاء تطبيق React Native وتشغيله على جهاز Android أو محاكي.

الملفات والمجلدات الرئيسية

• build.gradle: ملف البناء ذو ​​المستوى الأعلى حيث يمكنك إضافة خيارات التكوين المشتركة لجميع المشاريع الفرعية/الوحدات.
• gradle.properties: خصائص التكوين لنظام بناء Gradle.
• gradlew و gradlew.bat: نصوص برمجية لتشغيل أوامر Gradle على أنظمة Unix وWindows، على التوالي.
• settings.gradle: يحدد وحدات المشروع، بما في ذلك أي مكتبات خارجية أو وحدات إضافية قد يعتمد عليها مشروعك.

المجلدات الفرعية

برنامج/

• build.gradle: ملف البناء لوحدة التطبيق، الذي يحتوي على التكوينات والتبعيات الخاصة بتطبيقك.
• src/: يحتوي على الكود المصدري لجزء Android من تطبيقك.
  • رئيسي/:
  • AndroidManifest.xml: يصف المعلومات الأساسية حول تطبيقك لأدوات إنشاء Android ونظام التشغيل Android وGoogle Play.
  • java/: يحتوي على ملفات مصدر Java أو Kotlin، بما في ذلك MainActivity.java أو MainActivity.kt، نقطة الدخول للتطبيق.
  • res/: يحتوي على موارد التطبيق مثل التخطيطات والملفات القابلة للرسم (الصور) والسلاسل وملفات XML الأخرى التي يستخدمها التطبيق.
  • assets/: يخزن ملفات الأصول الأولية التي يحتاجها تطبيقك، مثل الخطوط أو الملفات الثنائية الأخرى.
  • jniLibs/: يحتوي على مكتبات أصلية مجمعة مسبقًا (ملفات .so) التي يعتمد عليها تطبيقك.

المهد /

• wrapper/: يحتوي على ملفات للمساعدة في نظام إنشاء Gradle.
  • gradle-wrapper.jar: ملف JAR لمغلف Gradle، مما يسمح لك ببناء مشروعك دون مطالبة المستخدمين بتثبيت Gradle.
  • gradle-wrapper.properties: يحدد إصدار Gradle الذي سيتم استخدامه وخصائص أخرى.

دائرة الرقابة الداخلية/ المجلد

يحتوي مجلد ios/ على كافة أكواد iOS الأصلية وملفات التكوين اللازمة لإنشاء تطبيق React Native وتشغيله على جهاز iOS أو جهاز محاكاة.

الملفات والمجلدات الرئيسية

• Podfile: يحدد التبعيات لجزء iOS من تطبيق React Native الخاص بك، والذي تتم إدارته بواسطة CocoaPods.
• Podfile.lock: لتأمين إصدارات التبعيات المحددة في Podfile، مما يضمن الاتساق عبر البيئات المختلفة.
• .xcworkspace: ملف مساحة عمل تم إنشاؤه بواسطة CocoaPods والذي تستخدمه لفتح مشروعك في Xcode.
• .xcodeproj: ملف مشروع Xcode الذي يحتوي على إعدادات ومعلومات مشروع تطبيقك.

المجلدات الفرعية

/

• AppDelegate.m أو AppDelegate.swift: يدير الأحداث والحالات على مستوى التطبيق، وهي نقطة الدخول لتطبيق iOS.
• Info.plist: يحتوي على معلومات التكوين الخاصة بالتطبيق، مثل معرف الحزمة واسم التطبيق والأذونات والإعدادات الأخرى.
• Assets.xcassets/: يحتوي على أصول صور وأيقونات التطبيق.
• Base.lproj/: يحتوي على لوحة العمل الرئيسية أو ملف شاشة الإطلاق (LaunchScreen.storyboard).
• main.m أو main.swift: نقطة الدخول الرئيسية للتطبيق، وإعداد كائن التطبيق وتفويض التطبيق.
• الملفات الداعمة/: تحتوي على موارد وتكوينات إضافية، مثل الاستحقاقات ورؤوس التجسير (في حالة استخدام Swift).

خاتمة

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