ReactNative/environment setup

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

إعداد بيئة التطوير في React Native

ستساعدك هذه الصفحة في تثبيت وبناء أول تطبيق React Native خاص بك.

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

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

بداية سريعة إلى Expo CLI

بافتراض أن لديك النسخة Node 12 LTS أو الأعلى مثبّتة، فيمكنك استخدام الأداة npm لتثبيت الأداة المساعدة لسطر أوامر Expo CLI كما يلي:

  • في npm:
npm install -g expo-cli
  • في Yarn:
yarn global add expo-cli

ثم شغّل الأوامر التالية لإنشاء مشروع React Native جديد يسمى "AwesomeProject":

  • في npm:
expo init AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start
  • في Yarn:
expo init AwesomeProject

cd AwesomeProject
yarn start # you can also use: expo start

وهذا سيؤدي إلى بدء خادم تطوير لك.

تشغيل تطبيق React Native الخاص بك

ثبّت تطبيق Expo client على هاتف iOS أو Android واتصل بنفس الشبكة اللاسلكية التي يتصل بها حاسوبك. استخدم تطبيق Expo لمسح رمز QR من جهازك الطرفي لفتح مشروعك على نظام Android. أما على نظام iOS، فاستخدم ماسح رمز QR المُدمَج في تطبيق الكاميرا.

تعديل تطبيقك

لنعدّل التطبيق بعد تشغيله بنجاح. افتح App.js في المحرّر الذي تختاره وعدّل بعض الأسطر، ثم يجب إعادة تحميل التطبيق تلقائيًا بمجرد حفظ التغييرات.

تهانينا! لقد نجحت في تشغيل وتعديل تطبيق React Native الخاص بك الأول.

ماذا بعد؟

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

إذا كانت لديك مشكلة مع Expo، فيرجى معرفة ما إذا كانت هناك مشكلة موجودة بالفعل قبل إنشاء مشكلة جديدة:

إن كنت مهتمًا بمعرفة المزيد عن React Native، فراجع صفحة مدخل إلى React Native.

تشغيل تطبيقك على محاكي أو جهاز افتراضي

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

ثم يمكنك تشغيل التطبيق الخاص بك على جهاز Android الافتراضي عن طريق تشغيل التعليمة npm run android، أو على iOS محاكي عن طريق تشغيل التعليمة npm run ios (على نظام تشغيلmacOS فقط).

مجموعة تحذيرات

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

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

يشكّل Expo CLI مشروعك لاستخدام أحدث إصدار من إطار عمل React Native والذي يدعمه تطبيق عميل Expo. يكتسب تطبيق عميل Expo دعمًا لإصدار React Native معين بعد حوالي أسبوع من إطلاق إصدار مستقر من React Native.

إن دمجتَ React Native في مشروع قائم، فستحتاج إلى تخطي Expo CLI والانتقال مباشرةً إلى إعداد بيئة البناء الأصيلة. انتقل إلى فقرة "بداية سريعة إلى React Native CLI" للحصول على إرشادات حول إعداد بيئة بناء أصيلة لإطار عمل React Native.

بداية سريعة إلى React Native CLI

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

تختلف التعليمات قليلًا اعتمادًا على نظام تشغيل التطوير لديك، وعلى رغبتك البدء في التطوير لنظام التشغيل iOS أو Android. إن أردت التطوير لكل من Android و iOS، فلا بأس بذلك، إذ يمكنك اختيار نظام لتبدأ به، نظرًا لأن الإعداد مختلف قليلًا.

  • نظام تشغيل التطوير macOS ونظام التشغيل المُستهدَف Android

تثبيت الاعتماديات

ستحتاج إلى Node و Watchman وواجهة سطر أوامر React Native و JDK و Android Studio. يمكنك استخدام أي محرر من اختيارك لتطوير تطبيقك، لكنك ستحتاج إلى تثبيت Android Studio لإعداد الأدوات اللازمة لإنشاء تطبيق React Native لنظام Android.

Node و Watchman

نوصي بتثبيت Node و Watchman باستخدام Homebrew. شغّل الأوامر التالية في الطرفية Terminal بعد تثبيت Homebrew:

brew install node
brew install watchman

إذا ثبّتَ Node على نظامك ، فتأكد من أن الإصدار هو Node 12 أو أحدث. Watchman هي أداة من Facebook لمشاهدة التغييرات في نظام الملفات، ويوصى بشدة بتثبيتها للحصول على أداء أفضل.

أدوات تطوير جافا

نوصي بتثبيت JDK باستخدام Homebrew. شغّل الأوامر التالية في الطرفية Terminal بعد تثبيت Homebrew:

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

إذا ثبّت JDK على نظامك، فتأكد من أنه الإصدار JDK 8 أو أحدث.

بيئة تطوير Android

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

1. ثبّت Android Studio

نزّل وثبّت Android Studio. تأكّد من تحديد المربعات المجاورة لجميع العناصر التالية أثناء استخدام معالج تثبيت Android Studio:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

ثم انقر فوق "Next" لتثبيت كل هذه المكونات.

إذا كانت خانات الاختيار غير مفعَّلة، فستتاح لك فرصة تثبيت هذه المكونات لاحقًا.

انتقل إلى الخطوة التالية بعد انتهاء الإعداد وعرض شاشة الترحيب.

2. ثبّت Android SDK

يثبّت Android Studio أحدث إصدار من Android SDK افتراضيًا، ولكن بناء تطبيق React Native بشيفرة أصيلة يتطلب Android 10 (Q) SDK على وجه الخصوص. يمكن تثبيت Android SDK إضافية من خلال SDK Manager في Android Studio، حيث يمكن تنفيذ ذلك من خلال فتح Android Studio، والنقر على الزر "Configure" ثم تحديد "SDK Manager".

Getting Started Android Studio Welcome MacOS

يمكن أيضًا العثور على SDK Manager في مربع حوار "Preferences" في Android Studio، باتباع المسار Appearance & Behavior ثم System Settings ثم Android SDK.

اختر التبويب "SDK Platforms" في SDK Manager، ثم حدد المربع بجوار "Show Package Details" في الزاوية السفلية اليمنى. ابحث عن المدخلة Android 10 (Q) ووسّعها، ثم تأكد من تحديد العناصر التالية:

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image أو Google APIs Intel x86 Atom System Image

ثم اختر التبويب "SDK Tools" وحدّد المربع بجوار "Show Package Details" هنا أيضًا. ابحث عن المدخلة "Android SDK Build-Tools" ووسّعها، ثم تأكد من تحديد 29.0.2 وتحديد "Android SDK Command-line Tools (latest)".

أخيرًا، انقر على "Apply" لتنزيل وتثبيت Android SDK وأدوات البناء المتعلقة به.

3. إعداد متغير البيئة ANDROID_HOME

تتطلب أدوات React Native إعداد بعض متغيرات البيئة من أجل إنشاء تطبيقات ذات شيفرة أصيلة.

أضف الأسطر التالية إلى ملف الإعداد HOME/.bash_profile$ أو HOME/.bashrc$ (إذا استخدمت zsh، فملف الإعداد هو zprofile./~ أو .~/.zshrc./~):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

bash_profile. خاص بـ bash. إن استخدمت صدفة shell أخرى، فستحتاج إلى تعديل ملف الإعداد المناسب الخاص بالصدفة.

اكتب source $HOME /.bash_profile لـ bash أو source $HOME/.zprofile لتحميل الإعداد في صدفتك الحالية. تحقق من ضبط ANDROID_HOME عن طريق تشغيل echo $ANDROID_HOME ، ومن إضافة الأدلة المناسبة إلى مسارك عن طريق تشغيل echo $PATH.

يرجى التأكد من استخدام مسار Android SDK الصحيح. يمكنك العثور على موقع SDK الفعلي في مربع حوار "تفضيلات" Android Studio ، ضمن المسار Appearance & Behavior ثم System Settings ثم Android SDK.

واجهة سطر أوامر React Native

يحتوي React Native على واجهة سطر أوامر مضمنة به. نوصيك بالوصول إلى الإصدار الحالي في وقت التشغيل باستخدام npx بدلًا من تثبيت إصدار محدد من CLI وإدارته عالميًا، والذي يُنزَّل مع Node.js. سيُنزَّل الإصدار الحالي المستقر من CLI وتنفيذه في وقت تشغيل الأمر باستخدام <npx react-native <command.

إنشاء تطبيق جديد

إذا ثبّتَ مسبقًا حزمة react-native-cli العالمية، فيجب إزالتها لأنها قد تسبب مشاكل غير متوقعة.

يحتوي React Native على واجهة سطر أوامر مضمنة، والتي يمكنك استخدامها لإنشاء مشروع جديد، ويمكنك الوصول إليها دون تثبيت أي شيء عالميًا باستخدام npx، والذي يُنزَّل مع Node.js. لننشئ مشروع React Native جديد يسمى "AwesomeProject":

npx react-native init AwesomeProject

هذا ليس ضروريًا إذا دمجت React Native في تطبيق قائم، أو إذا "أخرجت" من Expo، أو إذا أضفت دعم Android إلى مشروع React Native قائم (اطّلع الدمج مع تطبيقات قائمة في React Native). يمكنك أيضًا استخدام CLI كطرف خارجي لتهيئة تطبيق React Native مثل Ignite CLI.

استخدام إصدار أو قالب محدَّد (اختياري)

إذا أردت بدء مشروع جديد بإصدار React Native محدد، فيمكنك استخدام وسيطة الوسيط version--:

npx react-native init AwesomeProject --version X.XX.X

يمكنك أيضًا بدء مشروع بقالب React Native مخصَّص مثل TypeScript باستخدام الوسيط template--:

npx react-native init AwesomeTSProject --template react-native-template-typescript

تجهيز جهاز Android

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

التجهيز باستخدام جهاز حقيقي

إن كان لديك جهاز Android حقيقي، فيمكنك استخدامه للتطوير بدلًا من جهاز AVD عن طريق توصيله بحاسوبك باستخدام وصلة USB واتباع التعليمات الواردة في صفحة تشغيل التطبيق على جهاز في React Native.

التجهيز باستخدام جهاز افتراضي

إن استخدمت Android Studio لفتح الملف AwesomeProject/android/.، فيمكنك مشاهدة قائمة بأجهزة Android الافتراضية المتاحة (AVDs) من خلال فتح "AVD Manager" ضمن Android Studio. ابحث عن أيقونة تشبه ما يلي:

icon.png

إذا ثبّتَ مؤخرًا Android Studio، فستحتاج على الأرجح إلى إنشاء جهاز AVD جديد. حدّد "...Create Virtual Device"، ثم اختر أي هاتف من القائمة وانقر على "Next"، وبعد ذلك حدّد صورة Q API Level 29.

انقر فوق "Next" ثم "Finish" لإنشاء جهازك الافتراضي AVD. يجب الآن أن تكون قادرًا على النقر فوق زر المثلث الأخضر بجوار جهازك الافتراضي AVD لتشغيله، ثم انتقل إلى الخطوة التالية.

تشغيل تطبيق React Native الخاص بك

الخطوة الأولى: بدء Metro

ستحتاج أولًا إلى بدء Metro، وهو مجمّع JavaScript الذي يأتي مع React Native. يأخذ Metro ملفًا كدخل مع خيارات متنوعة، ويعيد ملف JavaScript يتضمن كل شيفرتك واعتمادياتها. (اطّلع على توثيق Metro).

ابدأ Metro من خلال تشغيل npx react-native start ضمن مجلد مشروع React Native الخاص بك:

npx react-native start

يشغّل الأمر react-native start مجمَّع Metro Bundler.

إن استخدمت مدير الحزم Yarn، فيمكنك استخدام yarn بدلاً من npx عند تشغيل أوامر React Native داخل مشروع قائم.

إذا كنت على دراية بتطوير الويب، فإن Metro يشبه إلى حد كبير الحزمة webpack لتطبيقات React Native. لا تُصرَّف compiled جافاسكريبت على عكس لغة Kotlin أو Java ، وكذلك لا يُصرَّف React Native أيضًا. ليس التجميع Bundling كالتصريف compiling، ولكنه يساعد في تحسين أداء بدء التشغيل وترجمة شيفرة JavaScript الخاصة بمنصة إلى شيفرة JavaScript مدعومة على نطاق واسع.

الخطوة الثانية: ابدأ بتشغيل تطبيقك

شغّل مجمّع Metro يعمل في طرفيته، ثم افتح طرفية جديدة داخل مجلد مشروع React Native الخاص بك. شغّل الأمر التالي:

npx react-native run-android

إذا جرى كل شيء بصورة صحيحة، فسترى تطبيقك الجديد قيد التشغيل في محاكي Android الخاص بك بعد وقت قصير.

Getting Started Android Success MacOS

يعد الأمر npx react-native run-android أحد طرق تشغيل تطبيقك، ويمكنك أيضًا تشغيله مباشرةً ضمن Android Studio.

إن لم تتمكن من تشغيله، فراجع صفحة استكشاف الأخطاء وإصلاحها في React Native.

تعديل تطبيقك

لنعدّل التطبيق بعد تشغيله بنجاح.

  • افتح App.js في محرر النصوص الذي تختاره وعدّل بعض الأسطر.

اضغط على المفتاح R مرتين أو اختر Reload من قائمة المطور Developer Menu (⌘M) لترى تغييراتك.

تهانينا! نجحت في تشغيل وتعديل تطبيق React Native الأول الخاص بك.

ماذا بعد؟

إذا أردت إضافة شيفرة React Native الجديدة إلى تطبيق قائم، فراجع دليل الدمج.

  • نظام تشغيل التطوير macOS ونظام التشغيل المُستهدَف iOS

تثبيت الاعتماديات

ستحتاج إلى Node و Watchman وواجهة سطر أوامر React Native و Xcode و CocoaPods.

يمكنك استخدام أي محرر من اختيارك لتطوير تطبيقك، لكنك ستحتاج إلى تثبيت Xcode من أجل إعداد الأدوات اللازمة لإنشاء تطبيق React Native لنظام iOS.

Node و Watchman

نوصي بتثبيت Node و Watchman باستخدام Homebrew. شغّل الأوامر التالية في الطرفية Terminal بعد تثبيت Homebrew:

brew install node
brew install watchman

إذا ثبّتَ Node على نظامك ، فتأكد من أن الإصدار هو Node 12 أو أحدث. Watchman هي أداة من Facebook لمشاهدة التغييرات في نظام الملفات، ويوصى بشدة بتثبيتها للحصول على أداء أفضل.

Xcode

أسهل طريقة لتثبيت Xcode هي من خلال متجر Mac App Store. سيؤدي تثبيت Xcode أيضًا إلى تثبيت المحاكي iOS Simulator وجميع الأدوات اللازمة لإنشاء تطبيق iOS الخاص بك.

إذا ثبّتَ Xcode على نظامك، فتأكد من أنه الإصدار 10 أو أحدث.

أدوات سطر الأوامر

ستحتاج أيضًا إلى تثبيت أدوات سطر أوامر Xcode. افتح Xcode، ثم اختر "...Preferences" من قائمة Xcode. انتقل إلى نافذة Locations وثبّت الأدوات عن طريق تحديد أحدث إصدار في قائمة أدوات سطر الأوامر.

Getting Started Xcode Command Line Tools
تثبيت محاكي iOS في Xcode

افتح Xcode ثم Preferences... وحدّد تبويب Components لتثبيت المحاكي simulator. اختر المحاكي الذي له الإصدار المقابل من iOS الذي ترغب في استخدامه.

CocoaPods

بُني CocoaPods باستخدام لغة Ruby وسيكون قابلًا للتثبيت باستخدام Ruby الافتراضية المتاحة على نظام macOS. يمكنك استخدام مدير Ruby Version، ​​لكننا نوصي باستخدام Ruby المعياري المتاح على نظام macOS.

يتطلب استخدام تثبيت Ruby الافتراضي استخدام sudo عند تثبيت gems. (هذه مشكلة تتعلق فقط بمدة تثبيت gem).

sudo gem install cocoapods

يرجى زيارة دليل بدء استخدام CocoaPods لمزيد من المعلومات.

واجهة سطر أوامر React Native

يحتوي React Native على واجهة سطر أوامر مضمنة به. نوصيك بالوصول إلى الإصدار الحالي في وقت التشغيل باستخدام npx بدلًا من تثبيت إصدار محدد من CLI وإدارته عالميًا، والذي يُنزَّل مع Node.js. سيُنزَّل الإصدار الحالي المستقر من CLI وتنفيذه في وقت تشغيل الأمر باستخدام <npx react-native <command.

إنشاء تطبيق جديد

إذا ثبّتَ مسبقًا حزمة react-native-cli العالمية، فيجب إزالتها لأنها قد تسبب مشاكل غير متوقعة.

يحتوي React Native على واجهة سطر أوامر مضمنة، والتي يمكنك استخدامها لإنشاء مشروع جديد، ويمكنك الوصول إليها دون تثبيت أي شيء عالميًا باستخدام npx، والذي يُنزَّل مع Node.js. لننشئ مشروع React Native جديد يسمى "AwesomeProject":

npx react-native init AwesomeProject

هذا ليس ضروريًا إذا دمجت React Native في تطبيق قائم، أو إذا "أخرجت" من Expo، أو إذا أضفت دعم Android إلى مشروع React Native قائم (اطّلع الدمج مع تطبيقات قائمة في React Native). يمكنك أيضًا استخدام CLI كطرف خارجي لتهيئة تطبيق React Native مثل Ignite CLI.

استخدام إصدار أو قالب محدَّد (اختياري)

إذا أردت بدء مشروع جديد بإصدار React Native محدد، فيمكنك استخدام وسيطة الوسيط version--:

npx react-native init AwesomeProject --version X.XX.X

يمكنك أيضًا بدء مشروع بقالب React Native مخصَّص مثل TypeScript باستخدام الوسيط template--:

npx react-native init AwesomeTSProject --template react-native-template-typescript

ملاحظة: إذا فشل الأمر السابق، فقد يكون لديك إصدار قديم من react-native أو react-native-cli مثبَّت عالميًا على حاسوبك. جرّب إلغاء تثبيت cli ثم تشغيله باستخدام npx.

تشغيل تطبيق React Native الخاص بك

الخطوة الأولى: بدء Metro

ستحتاج أولًا إلى بدء Metro، وهو مجمّع JavaScript الذي يأتي مع React Native. يأخذ Metro ملفًا كدخل مع خيارات متنوعة، ويعيد ملف JavaScript يتضمن كل شيفرتك واعتمادياتها. (اطّلع على توثيق Metro).

ابدأ Metro من خلال تشغيل npx react-native start ضمن مجلد مشروع React Native الخاص بك:

npx react-native start

يشغّل الأمر react-native start مجمَّع Metro Bundler.

إن استخدمت مدير الحزم Yarn، فيمكنك استخدام yarn بدلاً من npx عند تشغيل أوامر React Native داخل مشروع قائم.

إذا كنت على دراية بتطوير الويب، فإن Metro يشبه إلى حد كبير الحزمة webpack لتطبيقات React Native. لا تُصرَّف compiled جافاسكريبت على عكس لغة Kotlin أو Java ، وكذلك لا يُصرَّف React Native أيضًا. ليس التجميع Bundling كالتصريف compiling، ولكنه يساعد في تحسين أداء بدء التشغيل وترجمة شيفرة JavaScript الخاصة بمنصة إلى شيفرة JavaScript مدعومة على نطاق واسع.

الخطوة الثانية: ابدأ بتشغيل تطبيقك

شغّل مجمّع Metro يعمل في طرفيته، ثم افتح طرفية جديدة داخل مجلد مشروع React Native الخاص بك. شغّل الأمر التالي:

npx react-native run-ios

يُفترَض أن ترى تطبيقك الجديد قيد التشغيل في محاكي iOS بعد وقت قصير.

Getting Started iOS Success


يعد الأمر npx react-native run-ios أحد طرق تشغيل تطبيقك، ويمكنك أيضًا تشغيله مباشرةً ضمن Xcode.

إن لم تتمكن من تشغيله، فراجع صفحة استكشاف الأخطاء وإصلاحها في React Native.

تشغيل تطبيقك على جهاز

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

تعديل تطبيقك

لنعدّل تطبيقك بعد أن شغّلته بنجاح.

  • افتح App.js في محرر النصوص الذي تختاره وعدّل بعض الأسطر.
  • اضغط على R⌘ في المحاكي iOS Simulator لإعادة تحميل التطبيق وشاهد التغييرات.

تهانينا! نجحت في تشغيل وتعديل تطبيق React Native الأول الخاص بك.

ماذا بعد؟

إذا أردت إضافة شيفرة React Native الجديدة إلى تطبيق قائم، فراجع دليل الدمج.

  • نظام تشغيل التطوير Windows ونظام التشغيل المُستهدَف Android

تثبيت الاعتماديات

ستحتاج إلى Node وواجهة سطر أوامر React Native و JDK و Android Studio.

يمكنك استخدام أي محرر من اختيارك لتطوير تطبيقك، ولكنك ستحتاج إلى تثبيت Android Studio لإعداد الأدوات اللازمة لإنشاء تطبيق React Native لنظام Android.

Node و JDK

نوصي بتثبيت Node عبر Chocolatey، وهو مدير حزم شهير لنظام Windows.

إذا أردت أن تكون قادرًا على التبديل بين إصدارات Node المختلفة، فقد ترغب في تثبيت Node باستخدام nvm-windows، وهو مدير إصدارات Node لنظام Windows.

يتطلب React Native أيضًا Java SE Development Kit (JDK)، والتي يمكن تثبيتها باستخدام Chocolatey أيضًا.

افتح موجه الأوامر المسؤول Administrator Command Prompt (انقر بزر الفأرة الأيمن فوق موجه الأوامر Command Prompt وحدد "تشغيل كمسؤول Run as Administrator") ، ثم شغّل الأمر التالي:

choco install -y nodejs.install openjdk8

إذا ثبّت Node على نظامك بالفعل، فتأكد من أنه الأصدار Node 12 أو الأحدث منه، وإن كان لديك بالفعل JDK على نظامك، فتأكد من أنه الإصدار 8 أو الأحدث منه.

يمكنك العثور على خيارات تثبيت إضافية في صفحة تنزيلات Node.

إذا استخدمت أحدث إصدار من Java Development Kit، فستحتاج إلى تغيير إصدار Gradle لمشروعك حتى يتمكن من التعرف على JDK، إذ يمكنك عمل ذلك عن طريق الانتقال إلى:

{project root folder}\android\gradle\wrapper\gradle-wrapper.properties

وتغيير قيمة distributionUrl لترقية إصدار Gradle. يمكنك الاطلاع على أحدث إصدارات Gradle.

بيئة تطوير Android

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

1. ثبّت Android Studio

نزّل وثبّت Android Studio. تأكّد من تحديد المربعات المجاورة لجميع العناصر التالية أثناء استخدام معالج تثبيت Android Studio:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

ثم انقر فوق "Next" لتثبيت كل هذه المكونات.

إذا كانت خانات الاختيار غير مفعَّلة، فستتاح لك فرصة تثبيت هذه المكونات لاحقًا.

انتقل إلى الخطوة التالية بعد انتهاء الإعداد وعرض شاشة الترحيب.

2. ثبّت Android SDK

يثبّت Android Studio أحدث إصدار من Android SDK افتراضيًا، ولكن بناء تطبيق React Native بشيفرة أصيلة يتطلب Android 10 (Q) SDK على وجه الخصوص. يمكن تثبيت Android SDK إضافية من خلال SDK Manager في Android Studio، حيث يمكن تنفيذ ذلك من خلال فتح Android Studio، والنقر على الزر "Configure" ثم تحديد "SDK Manager".

Getting Started Android Studio Welcome MacOS

يمكن أيضًا العثور على SDK Manager في مربع حوار "Preferences" في Android Studio، باتباع المسار Appearance & Behavior ثم System Settings ثم Android SDK.

اختر التبويب "SDK Platforms" في SDK Manager، ثم حدد المربع بجوار "Show Package Details" في الزاوية السفلية اليمنى. ابحث عن المدخلة Android 10 (Q) ووسّعها، ثم تأكد من تحديد العناصر التالية:

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image أو Google APIs Intel x86 Atom System Image

ثم اختر التبويب "SDK Tools" وحدّد المربع بجوار "Show Package Details" هنا أيضًا. ابحث عن المدخلة "Android SDK Build-Tools" ووسّعها، ثم تأكد من تحديد 29.0.2 وتحديد "Android SDK Command-line Tools (latest)".

أخيرًا، انقر على "Apply" لتنزيل وتثبيت Android SDK وأدوات البناء المتعلقة به.

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/environment_setup&oldid=30974"