اخیرا تصمیم گرفتم از React Native برای توسعه برنامه های Android استفاده کنم و محیط ویندوز را برای برنامه نویسی انتخاب کردم در راه اندازی React Native در محیط ویندوز با مشکلاتی مواجه شدم ولی بالاخره تونستم ابزارها و برنامه های لازم را در ویندوز نصب کنم که تجربیاتم را برای شما شرح می دهم.

در این مقاله، درباره نحوه تنظیم محیط توسعه در ویندوز با استفاده از چارچوب React Native و Android Studio برای ساخت برنامه های Android صحبت خواهم کرد.

من از ابزارهای زیر برای تنظیم محیط توسعه خودم استفاده می کنم:

  1. سیستم عامل ویندوز
  2. ویژوال استودیو کد
  3. اندروید استودیو
  4. شبیه ساز ساخته شده در اندروید استودیو
  5. مدیر بسته نود (NPM)
  6. Node.js (نسخه 8 یا جدیدتر)
  7. فعال کردن رابط خط فرمان بومی(React Native CLI)
  8. کیت توسعه جاوا (JDK 8 یا جدیدتر)

در ادامه مراحل لازم برای نصب و اجرای برنامه های ReactNative در محیط ویندوز را مرور می کنم. توجه داشته باشید که در تمام مراحل زیر باید ارتباط سیستم با اینترنت برقرار بوده و سرعت کافی برای دانلود پکیج های مورد نیاز از اینترنت داشته باشد.

مرحله 1: نصب ویژوال استودیو کد

دانلود و نصب آخرین نسخه ویژوال استودیو کد برای ویندوز از آدرس

https://code.visualstudio.com/

مرحله 2: Android Studio را نصب کنید

دانلود و نصب آخرین نسخه از Android Studio برای ویندوز از آدرس

https://developer.android.com/studio/

اندروید استودیو به طور پیش فرض جدیدترین SDK آندروید را نصب می کند. React Native نیاز به اندروید 6.0 (Marshmallow) SDK یا بالاتر دارد. من تصمیم گرفتم از Android 7.1.1 (Nuga) استفاده کنم. از آخرین SDK استفاده کنید.

اندروید استودیو

اطمینان حاصل کنید که ابزار SDK زیر را نصب کرده اید:

SDK در اندروید استودیو

مهم: برای اجرای شبیه ساز در ویندوز، شما نیاز به شتاب دهنده شبیه ساز x86 emulator (نصب کننده HAXM) خواهید داشت. برای اطلاعات بیشتر، لطفا به لینک زیر مراجعه کنید:

https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows

توجه: شما باید Intel Virtualization Technology را با تغییر تنظیمات BIOS فعال کنید.

لطفا برای دیدن نحوه انجام این کار به لینک زیر مراجعه کنید:

https://stackoverflow.com/questions/21635504/error-during-installing-haxm-vt-x-not-working

متغیر محیط ANDROID_HOME را پیکربندی کنید. پنجره System را در قسمت System and Security در کنترل پانل Windows باز کنید، سپس روی Change settings کلیک کنید. برگه Advanced را باز کنید و بر روی Environment Variables کلیک کنید. برای ایجاد یک متغیر جدید ANDROID_HOME جدید که به مسیر Android SDK شما اشاره دارد، بر روی New کلیک کنید:

تنظیم متغیرهای محیطی در ویندوز

سرانجام، Android Debug Bridge (ADB) را به متغیر محیط PATH اضافه کنید. این کمک می کند تا بدانید دستگاه های متصل شده یا کدام شبیه ساز در حال اجرا هستند.

محل نصب  ADB را تعیین کنید:

C:\Users\user1\AppData\Local\Android\Sdk\platform-tools\adb.exe

مرحله 3: نصب Node

آخرین نسخه Node.js را از https://nodejs.org/en/ دانلود و نصب کنید.

توجه: Npm با Node.js نصب شده است. مطمئن شوید NPM را به متغیر محیط PATH اضافه  شده است.

و پس از آن نصب yarn با اجرای دستور زیر:

npm install -g yarn

مرحله 4: استفاده از JDK جاسازی شده

Android Studio با JDK جاسازی شده است که توصیه می شود. اطمینان حاصل کنید که گزینه زیر را در قسمت File → Other Settings → Default Structural Project در Android Studio بررسی کنید:

اندروید استودیو اس دی کا

مرحله 5: ایجاد یک برنامه جدید React Native

سرانجام، می توانیم اولین برنامه کاربردی React Native ما را با اجرای فرمان زیر در محل کار خود بسازیم.

react-native init SampleReactNativeProject

با اجرای دستور فوق، هنگام باز کردن پروژه در ویژوال استودیو کد، ساختار دایرکتوری زیر را خواهید دید:

ساختار پروژه راکت نیتیو

مرحله 6: ساختن برای اندروید

قبل از شروع به کار و اجرای برنامه، دایرکتوری “android” را در پروژه  در محیط  Android Studio باز کنید و یک شاخه “assets” را در زیر برنامه app/src/main ایجاد کنید.

ساختار پروژه react-native

برای ساده شدن فرآیند ساخت و نصب ، در package.json، اسکریپت زیر را در زیر مسیر «scripts» اضافه کنید:


"android-windows": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res &&
react-native run-android"

حالا دستور زیر را اجرا کنید تا برنامه را نصب کرده و آن را در شبیه ساز اجرا کند. این دستور اسکریپتی را که در در package.json تعیین کرده ایم را راه اندازی می کند.

npm run android-windows

این یک نمونه Metro Bundler را در یک خط فرمان جدید ایجاد کرده و برنامه را در شبیه ساز نصب می کند که نتیجه آن در زیر نشان داده شده است:

نتیجه اجرای دستور در پنجره خط فرمان

اجرای برنامه reactnative

نتیجه در برنامه شبیه ساز

اجرای برنامه reactnative در شبیه ساز

توجه: اگر در این مرحله با خطای زیر مواجه شوید

"java.lang.UnsupportedClassVersion Error: com / android / build /gradle /AppPlugIn: Unsupported major.minor version 52.0"

برای رفع آن باید اطمینان حاصل کنید که در مرحله 4 ، JDK جاسازی شده ، درست تنظیم شده است.


کاربر عزیز، اگر از این مقاله استفاده کردید و براتون مفید بود ، ممنون خواهم شد اگر در بخش نظرات، اعلام کنید.