دوره آموزش React Native

سلام دوستان... در قسمت قبل آموزش React Native با مفاهیم زیر آشنا شدیم.شروع کار با React Nativeشروع با Expo CLIاجرای یک Application React Nativeمفاهیم پایه React Nativeحال با ادامه آموزش React Native همراه باشیدراه اندازی محیط توسعه برای React Nativeدر Linux و Androidنصب پیش نیازهابرای اینکار به Node، خط فرمان React Native، و JDK و Android Studio نیاز دارید.می توانید از هر ویرایشگری برای توسعه applicationخود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Nativeخود برای android لازم خواهید داشت.نصب Nodeدستورالعمل مخصوص Linux را برای نصب Node 8.3 یا بالاتر دنبال کنید.ابزار React Native CLIنود 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نصب Java Development Kitری اکت React Nativeبه version 8 از package Java SE Development Kit (JDK) احتیاج دارد. می توانید OpenJDKرا از AdoptOpenJDKیا هر packager دیگری نصب کنید. می توانید از این لینک JDK را دانلود و نصب کنید.محیط توسعه androidاگر در آموزش React Native در ابتدای راه توسعه ی androidباشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.محیط توسعه androidاگر در ابتدای راه توسعه ی androidباشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.1. نصب Android Studio در آموزش React Native اندروید Studio را دانلود و نصب کنید. گزینه ی “Custom”را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:Android SDKAndroid SDK PlatformPerformance (Intel ® HAXM) (ببینید AMDبرای )Android Virtual Deviceگزینه “Next” را بزنید تا component های بالا نصب شوند.اگر باکس های موارد بالا غیرفعالند می توانید بعدا component مربوطه را نصب کنید.2. نصب Android SDKاندروید Android Studio به طور پیش فرض آخرین version SDK را نصب می کند. با این حال، build کردن یک application React Native به همراه کد 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) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:Android SDK Platform 28Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Imageسپس تب "SDK Tools" را بزنید و باکس کنار "Show Package Details" را هم تیک بزنید. "Show Package Details" را پیدا کنید، آن را باز کنید و مطمئن شوید 28.0.3 انتخاب شده باشد.در آخر، دکمه Applyرا بزنید تا Android SDK و بقیه ابزارهای buildنصب شوند.3. در config ANDROID_HOME environment variableابزارهای React Native برای buildکردن application با کد nativeنیاز به متغیرهای محیطی (environment variable) دارند.خطوط زیر را به فایل $HOME/.bash_profile یا $HOME/.bashrc اضافه کنید:export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport 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 چک کنید.مفهوم Watchmanبرای کامپایل و نصب Watchman از source، دستورالعمل نصب آن را از این لینک دنبال کنید.Watchmanابزاری است که توسط Facebook توسعه داده شده و برای مانیتور تغییرات در فایل سیستم به کار می رود. توصیه می شود برای عملکرد بهتر و سازگاری بیشتر از آن استفاده کنید. (ممکن است بدون نصب آن کارتان راه بیوفتد اما نصب آن شما را از مشکلات زیادی در آینده نجات می دهد.)ساخت یک 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.Xreact-native init AwesomeProject --version react-native@nextآماده سازی device android در آموزش React Native به یک 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 را انتخاب کنید.توصیه می کنم برای عملکرد بهتر VM accelerationرا روی سیستم خود کافیگ کنید. سپس به AVD Managerبازگردید.روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVD ساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.اجرای یک application React Nativeاز دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:cd AwesomeProjectreact-native run-androidاگر همه چیز درست انجام شده باشد باید applicationدر شبیه ساز android اجرا شود.دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studioآن را اجرا کنید.اگر دراین روش با مشکل مواجه شدید صفحه Troubleshootingرا ببینید.تغییر در applicationحال که توانستید بدون مشکل applicationرا اجرا کنید، می توانید آن را تغییر دهید.· فایل App.jsرا در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.· کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (Ctrl + M) بزنید تا تغییرات را ببینید.تمام شد!تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!قدم بعدی؟· از منوی Developer، Live Reloadرا فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reloadمی شود.· اگر می خواهید به یک application موجود کد React Nativeاضافه کنید بخش راهنمای ادغام application های موجود با React Native را ببینید.اگر می خواهید درمورد React Native بیشتر بدانید با ادامه آموزش React Native همراه باشید.