اخیرا تصمیم گرفتم از React Native برای توسعه برنامه های Android استفاده کنم و محیط ویندوز را برای برنامه نویسی انتخاب کردم در راه اندازی React Native در محیط ویندوز با مشکلاتی مواجه شدم ولی بالاخره تونستم ابزارها و برنامه های لازم را در ویندوز نصب کنم که تجربیاتم را برای شما شرح می دهم.
در این مقاله، درباره نحوه تنظیم محیط توسعه در ویندوز با استفاده از چارچوب React Native و Android Studio برای ساخت برنامه های Android صحبت خواهم کرد.
من از ابزارهای زیر برای تنظیم محیط توسعه خودم استفاده می کنم:
- سیستم عامل ویندوز
- ویژوال استودیو کد
- اندروید استودیو
- شبیه ساز ساخته شده در اندروید استودیو
- مدیر بسته نود (NPM)
- Node.js (نسخه 8 یا جدیدتر)
- فعال کردن رابط خط فرمان بومی(React Native CLI)
- کیت توسعه جاوا (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 زیر را نصب کرده اید:
مهم: برای اجرای شبیه ساز در ویندوز، شما نیاز به شتاب دهنده شبیه ساز 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 ایجاد کنید.
برای ساده شدن فرآیند ساخت و نصب ، در 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 را در یک خط فرمان جدید ایجاد کرده و برنامه را در شبیه ساز نصب می کند که نتیجه آن در زیر نشان داده شده است:
نتیجه اجرای دستور در پنجره خط فرمان
نتیجه در برنامه شبیه ساز
توجه: اگر در این مرحله با خطای زیر مواجه شوید
"java.lang.UnsupportedClassVersion Error: com / android / build /gradle /AppPlugIn: Unsupported major.minor version 52.0"
برای رفع آن باید اطمینان حاصل کنید که در مرحله 4 ، JDK جاسازی شده ، درست تنظیم شده است.
کاربر عزیز، اگر از این مقاله استفاده کردید و براتون مفید بود ، ممنون خواهم شد اگر در بخش نظرات، اعلام کنید.