دوشنبه ۲۲ مهر ۹۸ | ۱۴:۲۲ ۱۱۲ بازديد
آموزش React Native
قسمت اول
سلام در این جا می خواهیمآموزش React Nativeرا از مبتدی شروع کرده و به امید خدا به پیشرفته برسیم پس با ما همراه باشید.
اصلا React Native چیست : React Native مانند React هست اما به جای Component های مبتنی بر وب از Component های native به عنوان اجزای سازنده Application استفاده می کند. برای فهم ساختار یک React Native Application باید کمی با مفاهیم پایه React مثل JSX , Application , state و props آشنا شوید.
اگر با React آشنا هستید هنوز مواردی مختص React Native هستند که باید یاد بگیرید.در این جا سعی می کنیم طوری آموزش دهیم که برای همه مناسب باشد چه اینکه تجربه کار با React داشته باشید یا نه
شروع کار باReact Native
این بخشآموزشReact Nativeبه شما کمک می کند اولین Application React Native خود را نصب و build کنید. اگر React Native را قبلا نصب کرده اید، می توانید این بخش را رها کنید و مستقیما از بخش مفاهیم پایه در React Native ( بخش دوم آموزش ) شروع کنید.
اگر پیش زمینه ای از وب دارید، ساده ترین روش شروع کار باReact Nativeابزارهای Expo است. می توانید بدون نصب و راه اندازی Xcode یا Android Studio پروژه خود را راه اندازی کنید. توسط Expo CLI می توانید یک محیط توسعه روی سیستم خود راه اندازی کنید و در عرض چند دقیقه شروع به توسعه application React Native خود کنید. برای توسعه سریع، میت وانید از Snack برای توسعه و اجرای React Native در مرورگر خود استفاده کنید.
اگر با توسعه ی application به صورت native(جاوا یا swift) آشنا هستید، می توانید از React Native CLI استفاده کنید. برای شروع باید XCode یا Android Studio را نصب داشته باشید.
شروع با Expo CLI:
با این فرض که قبلا Node version 10 به بالا را نصب کرده اید، می توانید از npm برای نصب ابزار خط فرمان Expo CLI استفاده کنید:
npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start
این کار یک سرور توسعه برای شما راه اندازی می کند.
اجرای یک Application React Native
برنامه مخصوص ClientExpoرا روی iOS یا android خود نصب کنید و به شبکه wireless مشترک با کامپیوترتان، وصل شوید. روی android، با استفاده از application Expo کد QR را از ترمینال scan کنید تا برنامه تان باز شود. روی iOS، دستورالعمل های روی صفحه را دنبال کنید تا لینک بگیرید.
تغییر در Application
حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید. فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید. بعد از ذخیره آخرین تغییرات، application به طور اتوماتیک reload می شود.
تمام شد!
قدم بعدی؟
Expo مستندات زیادی دارد که می تواند مرجع خوبی برایتان باشد. بعلاوه می توانید در forum آن سوالات خود را مطرح کنید.
این ابزارها به شما کمک می کنند سریع توسعه را شروع کنید، اما قبل از ادامه کار با Expo CLI، درمورد محدودیت های آن مطالعه کنید.
اگر هنگام کار با Expo به مشکلی برخوردید، قبل از ایجاد یک issue جدید، لطفا issue های موجود را ببینید:
· صفحه ی Expo CLI issues (برای مشکلات مرتبط یا Expo CLI)
· صفحه ی Expo issues (برای مشکلات مربوط به Expo client یا SDK)
اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.
اجرای برنامه روی شبیه ساز یا Virtual device
با Expo CLI براحتی می توانید برنامه تان را روی device واقعی بدون راه اندازی هیچ گونه محیط توسعه، اجرا کنید. اگر می خواهید برنامه را روی شبیه ساز iOS یا Virtual device android اجرا کنید، به بخششروع با React Native CLIمراجعه کنید، برای اینکار باید Xcode یا محیط توسعه لازم برای android را راه اندازی کنید.
پس از راه اندازی پیش نیازها، می توانید با دستور npm run android برنامه را روی Virtual device android اجرا کنید. با دستور npm run ios روی Mac، می توانید برنامه را روی شبیه ساز iOS اجرا کنید.
هشدارها
از آنجا که موقع استفاده از Expo برای ایجاد پروژه از هیچ کد native (برای مثال جاوا) استفاده نمی کنید، نمی توان ماژول های native سفارشی به غیر از آنچه API های React Native فراهم می کند و component های موجود در application Client Expo، استفاده کرد.
اگر می دانید که قرار است نهایتا از کد native استفاده کنید، Expo همچنان گرینه خوبی برای شروع است. در مرحله آخر، می توانید با eject کردن پروژه، Build های Native بسازید. پس از eject کردن پروژه، بخششروع با React Native CLIبرای ادامه کار مرجع شماست.
اگر می خواهید کد native در پروژه تان داشته باشید از این دستور العمل پیروی کنید. برای مثال، اگر می خواهید React Native را در یک application که قبلا ایجاد کرده اید اضافه کنید، یا اگر یک application با Expo یا ابزار Create React Native Appتوسعه داده اید و "eject" کرده اید، به این بخش نیاز دارید.
این دستورالعمل ها به سیستم عامل مورد استفاده برای توسعه وابسته است و اینکه می خواهید برای iOS یا androidبرنامه بنویسید. اگر می خواهید برای هردو پلتفرم iOS و androidتوسعه بدهید، مشکلی نیست، یکی از آن ها را انتخاب کنید، چرا که هرکدام دستورالعمل متفاوتی دارند:
محیط توسعه: Mac، Windows، Linux
محیط اجرای نهایی: android، iOS
1. محیط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
اگر در ابتدای راه توسعه ی android باشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.
1. نصب Android Studio
نرم افزار Android Studio رادانلود و نصبکنید. گزینه ی “Custom” را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:
Android SDK
Android SDK Platform
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" را انتخاب کنید.
Android Studio
منیجر "SDK Manager" را می توان در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.
تب "SDK Platforms" را در SDK Managerانتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. Android 9 (Pie) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:
-
Android SDK Platform 28
-
Intel 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/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 چک کنید.
واچ منWatchman
واچ من 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.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" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:
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 AwesomeProject
react-native run-android
اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.
اجرای یک application React Native
دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.
تغییر در 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
آموزش React Native
