شروع کار با React Native

بدون دیدگاه

 

توی ابن دو روز اخیر درگیر یادگیری React Native بودم فرم ورک خوبیه ولی برای شروع یه کم درد سر و قلق های خاصی داره که تو کار آدم متوجه ی اون ها میشه و بعضا باید با کمی خلاقیت (یا با آزمون و خطا کردن های زیاد ) اون ها رو حل کنه در کل تونستم شروع کنم و تا اجرا برنامه برم (با کلی دردسر) و تو این پست وبلاگ می خوام راه و روش رو ایجاد پروژه رو رو کامل بگم و توضیح بدم تا اگه خواستین شما شروع کنید کار کردن با اون رو استارتش رو بزنین ..

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

خوب خوب بریم سر اصل مطلب اگه بخواین یه کم از تاریخچه ی ریکت بدونید باید بگم که تو سال ۲۰۱۵ توسط فیس بوک معرفی شد و اگه خواستیم بیشتر بدونید یه سرچ ساده می تونید کلی اطلاعات از اینترنت بگیرین چون هدف از این پست رو از اول مشخص کردم پس زیاد حاشیه نمی رم ..

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

تو قدم بعدی اندروید استودیو رو نصب می کنیم و از همه مهمتر به sdk هاش نیاز داریم و باید پوشه ی sdk  ها رو به عنوان یک متغییر محلی به سیستم عامل بشناسونیم (توضیحات بیشتر رو می تونید از اینجا ببینید )

من برای دید خروجی برنامه هام از genymotion استفاده کردم که نصب و استفاده کردن ازش زیاد سخت نیست و کلی مطلب تو اینترنت هست و برای کد نویسی هم از VSC استفاده می کنم.

این مرحله رو میشد اول هم انجام داد ولی خوب رسید اینجا 🙂 از مهم ترین کار هایی که باید بکنید اینه که Node رو دانلود و نصب کنید وقتی که کار نصب تموم میشه حالا می تونید (npm(Node Package Manager استفاده کنید به عبارتی با استفاده از این ابزار می تونید هر پکیجی رو که نیاز دارید دانلود و نصب کنید

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

بعد از اینکه نصب کردن هامون تموم شد می ریم سراغ CMD یا Power Shell(من خودم از دومی استفاده می کنم) تا بتونیم کار رو شروع کنیم .

حالا باید React Native رو نصب کنیم با دستور زیر این کار رو انجام می دیم
npm install -g react-native-cli

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

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

npm install yarn

خوب حالا می تونید پروژه ی ریکت خودتون رو بسازید برای این کار با دستور cd و یک فاصله آدرس جایی رو که می خواین اولین دستور رو قرار بدین بروید و کد زیر بزنید

 react-native init AwesomeProject

AwesomeProject تو دستور بالا رو با هر اسم دیگه ای که فکر می کنید می تونید عوض کنید .

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

حالا برای اجرای کردن برنامه از دستور زیر استفاده کنید

react-native run-android

به احتمال قوی با اجرای این دستور به مشکل می خوردید و این مشکل هم مربوط به  gradle هست و برای حل این برنامه رو تو VSCode باز کنید و به مسیر زیر برین

your app name>android>gradle>wrapper

و در فایل gradle-wrapper.properties مقدار distributionUrl را با مقدار زیر جایگزین کنید

distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip 
البته این مقدار برای آخرین ورژن تا به این لحظه هست و ممکنه با به روز رسانی ها مقدار تغییر کند .
حالا شبیه سازتون رو تو جنی موشن باز کنید و بعد دوباره برنامه رو ران کنید حالا برنامه تون توی جنی موشن اجرا می شه و یعد از اون می تونید کد نویسی ها رو شروع کنید.
امیدوارم با خواندن این پست یه کم از دردسرهاتون کم بشه


برچسب‌ها:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *