راه اندازی محیط توسعه React Native در ویندوز

651
react_native | اُکسیما

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

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

  • Windows
  • Visual Studio Code
  • Android Studio
  • Built-in emulator in Android Studio
  • Node Package Manager (NPM)
  • Node.js (Version 8 or newer)
  • React Native command line interface (React Native CLI)
  • Java Development Kit (JDK 8 or newer)

گام اول: نصب Visual Studio Code


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

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


گام دوم: نصب Android Studio


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

دانلود آخرین نسخه اندروید استودیو


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


android_sdk_1-oxima

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


android_sdk_2-oxima

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

Intel x86 Emulator Accelerator (نصب کننده HAXM)


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


android_sdk_3-oxima


گام سوم: نصب Node


برای دانلود و نصب آخرین نسخه Node.js برای ویندوز از لینک زیر استفاده کنید.

دانلود آخرین نسخه Node.js


پس از نصب npm، نصب React Native CLI را با اجرای فرمان زیر در Windows prompt command و یا Integrated Terminal در ویژوال استودیو کد نصب کنید. توجه: Integrated Terminal را می توان در قسمت View → Terminal Integrated یافت.


        
             npm install -g react-native-cli
        
    

گام چهارم: استفاده از embedded JDK


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


jdk_1-oxima

گام پنجم: ایجاد یک برنامه جدید React Native


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


        
            react-native init SampleReactNativeProject
        
    

در هنگام باز کردن پروژه در ویژوال استودیو کد ساختار دایرکتوری زیر را مشاهده می کنید.


react_native_direction-oxima

گام ششم: ساختن برای اندروید


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


build_android-oxima

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


        
            "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
        
    


emulator-oxima

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

پیوست ها :
  • این مقاله دارای پیوست نمی باشد.
loder | اُکسیما
»» نویسنده مقاله
حسین رئیسی | اُکسیما

حسین رئیسی
»» پشتیبانی مقاله

تیم پشتیبانی اُکسیما به صورت 24 ساعت در هر زمان و مکان، پاسخگوی تمامی سوالات و ابهامات شما در مورد این مقاله خواهند بود. بدین منظور شما می توانید از طریق روش های زیر از پشتیبانی فنی این مقاله برخوردار گردید. تیم پشتیبانی این اطمینان خاطر را به شما دانشجویان گرامی خواهند داد که در سریع ترین زمان ممکن پاسخگوی شما عزیزان باشند.


به اشتراک بگذارید ...

دوستان و همراهان گرامی : آیا تمایل دارید این مقاله را با دوستان و آشنایان خود در تلگرام به اشتراک بگذارید؟

مقاله های پیشنهادی

توسعه ی برنامه های هیبریدی باعث می شود که کار برای توسعه دهندگان وب بسیار ساده شود چرا که آن ها یک برنامه واحد ایجاد می کنند که کارآمد در سیستم عامل های متعدد مانند iOS، Android و windows می باشد بدون اینکه هیچ گونه تلاش اضافی انجام دهند. همچنین مزایای استفاده از برنامه Hybrid که شامل توسعه هزینه های مؤثر، دسترسی به طیف گسترده ای از قابلیت های سخت افزاری / نرم افزاری متعدد و ... می باشد. بنابراین، می توان آن را یک سرمایه گذاری سودآور برای مردم دانست .

حسین رئیسی

301

کل استراتژی تجارت در استراتژی بازاریابی خلاصه می شود . توانایی جذب جوانب مطلوب ، ضامن موفقیت شما در تجارت است . شما مسئول ایجاد تصمیمات استراتژیک اساسی برای تجارت خود ، به ويژه در این چهار زمینه هستید .

حسین رئیسی

426

ProgressButton یک کتابخانه ساده برای نمایش یک باتن همراه با وضعیت لود شدن می باشد که شما می توانید از آن به عنوان یک باتن برای دانلود استفاده نمایید .

حسین رئیسی

250