سلام دوستان... در قسمت قبل آموزش React Native با مفاهیم زیر آشنا شدیم.
حال با ادامه آموزش React Native همراه باشید
نصب پیش نیازها
برای اینکار به Node، Watchman، خط فرمان React Native، و JDK و Android Studio نیاز دارید.
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android، لازم خواهید داشت.
نصب Node, Watchman, JDK
توصیه می شود برای نصب این سه از Homebrew استفاده کنید. بعد از نصب Homebrew، دستورات زیر را در ترمینال اجرا کنید:
brew install node
brew install watchman
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
اگر Node را قبلا روی سیستم خود نصب کرده اید، مطئمن شوید versionآن 8.3 به بالا باشد.
واچ Watchman ابزاری برای Facebook برای دنبال کردن تغییرات در فایل سیستم است. پیشنهاد می کنم برای performance بهتر آن را نصب کنید.
اگر قبلا JDKرا نصب کرده اید، مطمئن شوید که از version 8 آن یا جدیدتر، استفاده می کنید.
ابزار React Native CLI در آموزش React Native
نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.
دستورات زیر را در ترمینال اجرا کنید.
npm install -g react-native-cli
اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستقیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh
محیط توسعه android در آموزش React Native
اگر در ابتدای راه توسعه ی androidباشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.
1. نصب Android Studio
اندروید Android Studio را دانلود و نصب کنید. گزینه ی “Custom” را را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:
گزینه “Next” را بزنید تا componentهای بالا نصب شوند.
اگر باکس های موارد بالا غیرفعالند میتوانید بعدا component مربوطه را نصب کنید.
2. نصب Android SDK
اندروید Android Studio به طور پیش فرض آخرین نسخه SDKرا نصب می کند. با این حال، build کردن React Native application به همراه کد native، نیاز به Android 9 (Pie) SDK دارد. SDK های دیگر از طریق SDK Manager در Android Studio قابل نصب هستند.
از صفحه ی "Welcome to Android Studio" گزینه ی "Configure" را انتخاب کنید. سپس "SDK Manager" را انتخاب کنید.
عکس
مدیریت "SDK Manager" را میتوان در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.
تب "SDK Platforms" را در SDK Manager انتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. Android 9 (Pie) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:
سپس تب "SDK Tools" را بزنید و باکس کنار "Show Package Details" را هم تیک بزنید.
قسمت "Show Package Details" را پیدا کنید، آن را باز کنید و مطمئن شوید 28.0.3 انتخاب شده باشد.
در آخر، دکمه Applyرا بزنید تا Android SDK و بقیه ابزارهای build نصب شوند.
3. قسمت ANDROID_HOME environment variable config در آموزش React Native
ابزارهای React Native برای build کردن application با کد native، نیاز به متغیرهای محیطی (environment variable) دارند.
خطوط زیر را به فایل $HOME/.bash_profile یا $HOME/.bashrc اضافه کنید:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
قسمت .bash_profileمختص bashاست. اگر از Shellدیگری استفاده می کنید، فایل تنظیمات مخصوص آن shell را باید تغییر دهید.
با تایپ کردن source $HOME/.bash_profile فایل را در shell باز کنید. با اجرای دستور echo $PATHبررسی کنید ANDROID_HOMEبه pathاضافه شده باشد.
مطمئن شوید که از مسیر صحیح Android SDK استفاده می کنید. می توانید مکان SDK را در Android Studio در بخش "Preferences"، در مسیر Appearance & Behavior → System Settings → Android SDK چک کنید.
ساخت یک application
توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:
react-native init AwesomeProject
اگر می خواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo(یا Create React Native App) پروژه ای را eject کرده اید، یا اگر می خواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم-محور را ببینید)، این کار لازم نیست. همچنین میتوانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.
استفاده از یک versionخاص
اگر می خواهید پروژه جدیدی را با یک version خاص از React Native بسازید، میتوانید از آرگومان –version استفاده کنید:
react-native init AwesomeProject --version X.XX.X
react-native init AwesomeProject --version react-native@next
آماده سازی device android
به یک device androidنیاز دارید که application android React Native خود را روی آن اجرا کنید. می تواند یک موبایل باشد یا می توانید از Android Virtual Device به عنوان شبیه ساز device android روی کامپیوتر خود استفاده کنید.
درهرصورت، باید deviceرا برای اجرای applicationدرهنگام توسعه، آماده کنید.
استفاده از یک deviceفیزیکی
اگر یک device androidواقعی دارید، میتوانید به جای AVD از آن هنگام توسعه استفاده کنید. device را با کابل USB به کامپیوتر وصل کنید و دستورالعمل اینجا را دنبال کنید.
استفاده از یک Virtual device
اگر با Android Studioپروژه ی ./AwesomeProject/androidرا باز کنید، می توانید لیستی از virtual device android ها را از بخش "AVD Manager" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:
اگر تازه Android Studioرا نصب کرده باشید، احتمالا باید یک AVD جدید بسازید. گزینه ی "Create Virtual Device..." را بزنید، سپس یکی از موبایل ها را از لیست انتخاب کنید و روی "Next" کلیک کنید. سپس Image Pie API Level 28 را انتخاب کنید.
اگر HAXM را نصب ندارید، این دستورالعمل را برای راه اندازی آن دنبال کنید، سپس به AVD Manager بازگردید.
روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVD ساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.
اجرای یک application React Native
از دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:
cd AwesomeProject
react-native run-android
اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.
دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.
اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.
تغییر در application
حال که توانستید بدون مشکل applicationرا اجرا کنید، می توانید آن را تغییر دهید.
• فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
• کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (⌘M) را بزنید تا تغییرات را ببینید.
تمام شد!
تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!
قدم بعدی؟
• از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
• اگر می خواهید به یک applicationموجود، کد React Native اضافه کنید بخش راهنمای ادغام applicationهای موجود با React Native را ببینید.
اگر می خواهید درمورد React Native بیشتر بدانید با ادامه آموزش React Native همراه باشید.
