صفر تا صد اجرا کردن یک برنامه React-Native اندروید


به نام خدا

از اونجایی که خودم هم خیلی به این مشکل خوردم که تو نصب مقدمات کارهایی که باید انجام بشه تا یک اپ اندرویدی بالا بیاد خواستم این تجربیات و براتون بنویسم تا شما حداقل به این مشکلات برنخورید و اعصابتون خورد نشه.

پس شروع کنیم اولین اپ خودمون و بنویسیم.

برای اینکه ما بتونیم اولین اپ خودمون و بنویسیم(البته بگم که ما قرار نیس اپ بنویسیم فقط قراره تا اونجا که اپ ما بالا بیاد و به هیچ مشکلی نخوره پیش بریم) نیازه یک سری چیزها رو نصب کنیم و یک سری کارا انجام بدیم.با من همراه باشین تا این کار و باهم انجام بدیم.

اول از همه باید جایی که مرجع همه ما هست و بهتون معرفی کنم که کل کاری که میکنیم از روی این سایت هست و چون یه سری جاهاش مشکل داره من هم مشکلاتشو براتون میگم و هم کمک میکنم تا بتونید راحت تر درکش کنید.

https://facebook.github.io/react-native/docs/getting-started

اونایی که یکم حرفه ای ترن میدونن کدوم قسمتش برن و چیکار کنن اونایی هم که هنوز اول راه هستن با خودم همراه باشن تا با هم بریم جلو.

خوب اولین کاری که نیاز داریم تا به هدفمون برسیم اینه که روی سیستم عامل(در اینجا ویندوز) Chocolatey و نصب کنیم.

حالا توضیحی که توی این صفحه نوشته شده یکم سخته پس من چند تا قدم براتون مینویسم که انجام بدین و بدون دردسر نصب کنیدش.

1- تو ویندوز 8 به بعد فک کنم از منو استارت میتونید این کلمه رو جستجو کنید «Windows PowerShell» وقتی پیداش کردین روش راست کلیک کنید و روی «Run as administrator» کلیک کنید .

یک پنجره براتون باز میشه که ما باید یک سری کدهارو و توش بزنیم.

Set-ExecutionPolicy Bypass -Scope Process -Force; `iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

خوب حالا کد بالارو کامل کپی کنید و تو پنجره آبی رنگی که مشاهده می کنید جای گذاری کنید و یک اینتر بزنید.(نکته : برای همه این کارها لازمه که vpn داشته باشین)

بعد از اینکه نصب با موفقیت انجام شد باید این پنجره رو ببندین و دوباره به همون روش قبلی بازش کنید.

حالا این پنجره رو فعلا کوچیکش کنید چندتا کار قبلش انجام بدیم و باز برگردیم سراغش.

اولین کار اینه که این فایل و بگیرید و نصبش کنید

https://nodejs.org/dist/v12.13.1/node-v12.13.1-x64.msi

اسم این فایل Node.js هست که خیلی جاها کاربرد داره.

خوب حالا که این فایل و نصب کردید به همون poweshell برگردید و این دستور و توش اجرا کنید.

choco install -y python2

تا این فایل هم نصب بشه.

حالا فقط یک فایل دیگه هست که اون رو هم باید از لینک زیر دانلود و نصب کنید.

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

تو این مسیر باید فایلی که مناسب ویندوز خودتون هست دانلود و نصب کنید.(راستی فیلتر شکن یادتون نره)

حالا که همه این پیش نیاز ها نصب شده و مشکلی وجود نداره میریم مرحله بالاتر.

(اگر تو هرکدوم از این مراحل به مشکل خوردید مجدد تلاش کنید تا درست بشه و بعد برید سراغ بعدی)

خوب این کارارو که انجام دادیم یک سری کار دیگه هست که انجام بدیم.

اول به این آدرس مراجعه کنید .(برای راحتی بیشتر اون هارو به چند بخش تقسیم کردم)

http://s7.picofile.com/file/8380725934/android_sdk.zip.html
http://s7.picofile.com/file/8380726650/android_sdk.z01.html
http://s7.picofile.com/file/8380727292/android_sdk.z02.html
http://s6.picofile.com/file/8380727800/android_sdk.z03.html
http://s7.picofile.com/file/8380728226/android_sdk.z04.html

از اینجا فایل و دانلود کنید و اون رو توی مسیر دلخواه (مسیری که مطمئن باشه و تا میشه حذف نشه که بعدا به دردسر نیوفتین) و اسم پوشه هم میتونه دلخواه باشه(مثلا sdk)

حالا یکم جلوتر میریم و تقریبا کارهای آخر و انجام میدیم.

1 - تو همون جستجوی ویندوز این عبارت رو جستجو کنید «View Advanced system settings»

تو پنجره ای که باز میشه تو تب Advanced اون پایین نوشته «Enviroment Variables» روش کلیک کنید.

تو قسمت بالایی روی New کلیک کنید و تو قسمت اول(name) بنویسید «ANDROID_HOME» و تو قسمت دوم(value) آدرس همون پوشه دلخواه که بالا ساختیم(sdk) و بهش بدید و درنهایت اوکی رو بزنید.

حالا تو همونجایی که هستیم یک ردیف داریم که variable ی به اسم Path داره اونو انتخاب کنید و روی Edit کلیک کنید.پنجره ای براتون باز میشه که 3تا ردیف داره ، حالا ما باید یک ردیف دیگه بهش اضافه کنیم پس ، از سمت راست روی New کلیک کنید و آدرس پوشه platform-tools و که توی پوشه دلخواهمون(sdk) بود بهش میدیم و در انتها ok و کلیک میکنیم.

یادتونه اون بالا فایل jdk8 و گرفتیم و نصب کردیم؟ اون فایل و وقتی نصب میکنید میره تو این مسیر : 

C:/ProgramData/Oracle/

حالا تا این پنجره(View Advanced system settings) بازه یک کار کوچولو دیگه هم باید انجام بدیم و اونم اینه که تو قسمت پایین(system variables) هم یک ردیف با اسم Path وجود داره که اون رو هم باید ویرایش کنیم پس بعد از انتخابش روی Edit کلیک کنید. مسیر زیر و بهش بدید

C:\ProgramData\Oracle\Java\javapath

خوب کار ما تقریبا برای آماده سازی ویندوز تموم شده.

تا اینجا مقدمات کار ما آماده شده. البته اگه یکم گیج نشده باشین و تونسته باشین با من همراه باشین.

از اینجا ب بعدش دیگه کاری نداره و بستگی به تجربتون داره .

برای اینکه یک اپ اندرویدی بالا بیاد باید یک شبیه ساز یا همون simulator داشته باشین که من بهتون genymotion و پیشنهاد میدم(تو سایت های ایرانی هم بگردین لینک های دانلودش هست).

تا وقتی که این شبیه ساز داره نصب میشه ما چنتا کار کوچیک انجام بدیم .تو قسمت استارت ویندوز Command Prompt و جستجو کنید و این دستور و داخلش بزنید

npm i react-native-cli

صبر کنید تا اینکه نصب بشه. بعد از اینکه نصبش تموم شد برای تست تو همین پنجره بنویسید

react-native -version

اگر ورژن و بهتون نشون داد که خوب همه چیز حله و میریم مرحله بعد ولی اگر خطا داد دستور قبلی و مجدد اجرا کنید و مطمئن هم باشین که فیلتر شکن وصل باشه.

حالا جایی که میخواهید پروژتونو نصب کنید باید اون مسیر و به Command prompt بدین و بعدش این دستور و بزنید.

react-native init TestProject

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

دیگه کم کم کار تمومه کافیه که داخل پوش ای که ساخته بشین و دستور زیر و بزنید(آدرس داخل پوشه رو به Command prompt بدین). فقط قبلش یادتون نره که باید شبیه ساز و اجرا کنید که خطا نده بهتون.

react-native run-android

اگر همه کارهای بالا رو با دقت انجام داده باشین نباید مشکلی باشه و همه چیز مرتب باشه و از اینکه تونستین برنامتونو اجرا کنید خوشحال باشید.

امیدوارم که تونسته باشم خوب توضیح داده باشم و در آخر باید بگم که منتظر این توضیحات برای اپ ios هم باشین.

یاعلی