تقنية

الغوص في React Native لتطوير Android

- إعلان-

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

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

دعنا نلقي نظرة على الأشياء التي يجب أن نأخذها في الاعتبار:

  • الرسوم المتحركة
  • أداء
  • رد فعل التصميم الأصلي
  • استخدم مكتبة المجمع CSS-in-JS
  • استخدم Expo-Kit فقط عند الحاجة
  • اختر مكتبة التنقل الصحيحة
  • قم بتحويل أي مشروع ويب إلى هاتف محمول بسهولة
  • الغرض من تطوير React Native Apps
  • تحجيم البرامج الخاصة بك للعمل على مجموعة متنوعة من الأجهزة وأحجام الشاشات

مرت السنوات ، وكان الطلب على مواهب React Native مرتفعًا. منذ أن تعلمت شيئًا جديدًا منذ وقت طويل ، فكرت لماذا لا أجربه؟

قم بتثبيت الأدوات اللازمة لبدء استخدام React Native

قم بإعداد Visual Studio Code (أو محرر الكود الذي تختاره)

قم بتنزيل وتثبيت Android Studio لنظام التشغيل Windows. بشكل افتراضي ، يقوم Android Studio بتثبيت أحدث إصدار من Android SDK. يتطلب React Native إصدار Android SDK 6.0 (Marshmallow) أو إصدارًا أحدث. نوصي باستخدام أحدث SDK.

قم بعمل متغيرات البيئة التالية لـ Java SDK و Android SDK:

أدخل "تحرير متغيرات بيئة النظام" في شريط بحث Windows لبدء تشغيل ملف خصائص النظام نافذة.

اختار متغيرات البيئة…، ثم جديد… تحت متغيرات المستخدم.

املأ اسم المتغير وقيمته (المسار). فيما يلي الدلائل الافتراضية لـ Java و Android SDK. إذا قررت تثبيت Java و Android SDKs في مكان محدد ، فتأكد من تعديل المسارات المتغيرة بشكل صحيح.

JAVA_HOME: C: \ Program Files \ Android \ Android Studio \ jre \ jre

ANDROID_HOME: C: \ Users \ username \ AppData \ Local \ Android \ Sdk

قم بتنزيل وتثبيت NodeJS لنظام التشغيل Windows. إذا كنت ستتعامل مع العديد من المشاريع والإصدارات من NodeJS ، فيجب أن تفكر في استخدام Node Version Manager (nvm) لنظام Windows. بالنسبة للمشاريع الجديدة ، نوصي بتثبيت أحدث إصدار من LTS.

قم بإنشاء مشروع React Native جديد.

لإنشاء مشروع React Native جديد ، استخدم npx ، أداة تشغيل الحزم المضمنة مع npm. من موجه أوامر Windows أو PowerShell أو Windows Terminal أو المحطة الطرفية المتكاملة لـ VS Code (عرض> المحطة الطرفية المتكاملة).

اقرأ أيضا: أين ومتى يجب استخدام خدمات React Native؟

بوويرشيلكوبي

الحرف الأول من التفاعل الأصلي npx MyReactNativeApp

افتح دليل "MyReactNativeApp" الجديد:

بوويرشيلكوبي

القرص المضغوط MyReactNativeApp

قم بتوصيل سلك USB بجهاز الكمبيوتر الخاص بك إذا كنت تريد تشغيل مشروعك على جهاز Android فعلي.

إذا كنت ترغب في تشغيل مشروعك على محاكي Android ، فلن تضطر إلى فعل أي شيء لأن Android Studio يأتي مع محاكي مدمج. إذا كنت ترغب في تنفيذ برنامجك على محاكي جهاز معين. في شريط الأدوات ، اختر الزر AVD Manager.

أدخل الأمر التالي لبدء مشروعك. سيؤدي هذا إلى تشغيل Node Metro Bundler في نافذة وحدة تحكم جديدة.

بوويرشيلكوبي

npx-native-run-android

بوويرشيلكوبي

C: \ Users \ [User Name] \ AppData \ Local \ Android \ Sdk \ tools \ bin \ sdkmanager –licenses

لإجراء تغييرات على التطبيق ، أدخل دليل مشروع My React Native App في IDE المفضل لديك. نحن نفضل Visual Studio Code أو Android Studio.

يشتمل نموذج مشروع init-native على صفحة أولية تسمى App.js. هذه الصفحة مملوءة مسبقًا بعدد كبير من الروابط ذات الصلة بـ رد فعل التنمية الأصلية مصادر. املأ العنصر النصي الأول بالنص ، مثل "HELLO WORLD!" سلسلة كما هو موضح أدناه.

جافا سكريبت

  يحرر App.js لتغيير هذه الشاشة ، ثم العودة للتحقق من التغييرات.

"مرحبا بالعالم!"

لمشاهدة التغييرات التي أجريتها ، أعد تحميل التطبيق. هناك طرق مختلفة لهذا.

أدخل "r" في نافذة وحدة تحكم Metro Bundler.

انقر نقرًا مزدوجًا على "r" على لوحة المفاتيح في محاكي جهاز Android.

قم بهز الجهاز لإظهار قائمة تصحيح أخطاء React Native وحدد "إعادة تحميل" على جهاز يعمل بنظام Android.

فيما يلي فوائد React Native لـ تطوير تطبيقات Android:

  • سهل التعلم
  • يتحسن باستمرار
  • عدد ضخم من المكتبات
  • المجتمع المتزايد بنشاط
  • المكونات الأصلية لكلا النظامين الأساسيين
  • يلغي Expo الحاجة إلى امتلاك جهاز Mac من أجل الإنشاء لنظام iOS.
  • لن تكون هناك أوقات بناء غير محدودة مع إعادة التحميل المباشر والساخن.
  • قاعدة رموز مشتركة بين تطبيقات Android و iOS ، مع تغييرات صغيرة فقط ضرورية لمطابقة تجارب النظام الأساسي.
  • انخفاض في موارد العمالة بينما قد لا تزال هناك حاجة إلى بعض التطوير الأصلي لنظام Android / iOS ، سيكون ذلك نادرًا.

خاطرة النهائي:

أحد الأسباب الرئيسية التي تجعل React Native أحد أعظم أطر العمل عبر الأنظمة الأساسية لتطبيقات الأجهزة المحمولة هو عرض واجهة المستخدم الرائع. استعن بمطورين محليين من React لتوفير خدمات تطوير تطبيقات الأجهزة المحمولة من React Native لأجهزة Android و iOS.

تابعونا على Instagram (uniquenewsonline) والفيسبوك (uniquenewswebsite) للحصول على تحديثات إخبارية منتظمة مجانًا

مقالات ذات صلة