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 في React Native

بافتراض أن لديك النسخة 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 افتراضي، فيمكنك الرجوع إلى التعليمات الموجودة في فقرة "بداية سريعة إلى Expo CLI في React Native" لمعرفة كيفية تثبيت Xcode أو إعداد بيئة تطوير Android.

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