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

343
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 ساعت در هر زمان و مکان، پاسخگوی تمامی سوالات و ابهامات شما در مورد این مقاله خواهند بود. بدین منظور شما می توانید از طریق روش های زیر از پشتیبانی فنی این مقاله برخوردار گردید. تیم پشتیبانی این اطمینان خاطر را به شما دانشجویان گرامی خواهند داد که در سریع ترین زمان ممکن پاسخگوی شما عزیزان باشند.


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

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

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

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

حسین رئیسی

343

یک ابزار جمع و جور اندروید برای ساخت و جمع کردن چند ضلعی های منظم با امکاناتی نظیر : تعداد ضلع (≥ 3) - مختصات مرکز - شعاع بیرونی (مرکز به رأس) - گرد کردن گوشه ها و ...

حسین رئیسی

229

FancyButton یک باتن قدرتمند برای اندروید هست با ویژگی های زیر : Border (stroke, radius, color)- Background (normal, focus)- Icon (Drawable, font Icon)- Icon (Position, size)- Icon Size- Icon Padding

حسین رئیسی

272