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، فيرجى معرفة ما إذا كانت هناك مشكلة موجودة بالفعل قبل إنشاء مشكلة جديدة:

• مشاكل Expo CLI
• أو مشاكل Expo (للقضايا المتعلقة بعميل Expo أو SDK).

إن كنت مهتمًا بمعرفة المزيد عن 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".

يمكن أيضًا العثور على 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. ابحث عن أيقونة تشبه ما يلي:

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

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