farshadfahimi
farshadfahimi
خواندن ۶ دقیقه·۵ سال پیش

تجربه اولین برنامه موبایل به کمک react-native

react native
react native


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

البته در کشور ما به خاطر تحریم‌ها و مشکلاتی که وجود داره سیستم عامل `android` به شدت رشد خوبی داشته نسبت به `ios`.

برای نوشتن برنامه های موبایل چند تا راه هستش یک اینکه از همون زبونی که شرکت گفته استفاده کنید مثلا توی موضوع `android` میشه به `java` و `kotlin` اشاره کرد.

و یا اینکه با کمک برخی از زبون های دیگه مثل `javascript` اون رو پیاده سازی کرد که البته تو این مورد باید از برخی کتابخونهها یا فریمورک ها انجام بشه مثل `flutter` یا `react-native` و ...


خب بریم سراغ اصل مطلب

این نکته ها یادت باشه

اولین قدم اینه که بدونید داکیومنت react-native کاملا دوست شماست و منبع اصلی شما.
مراحل راه اندازی یکم دردسر داره و خب به خاطر تحریم ها بدتر هم شده ولی اگر دقت کنید خیلی سادست.
این آموزش هم برای سیستم عامل‌های لینوکسی هستش و نسخه `ubuntu`.

نیازمندی هایی که لازم دارید روی سیستم شامل موارد زیر هستش

باید NodeJs روی سیستم نصب باشه حتما و اگر هم نصب نیست میتونید برید به لینک گیت یا اینکه به سایت خودش مراجعه کنید که پیشنهاد من همون لینک گیت هستش.
و بعدش یکی از پکیج منیجر ها مثل yard یا npm ر نصب کنید که پیشنهاد من همون `npm` هستش. که میگن همراه nodejs خودش نصب میشه.

مورد بعدی java هستش که باید jdk رو نصب کنید روی سیستم و برای نصبش میتونید یه سر به این لینک بزنید تا نصبش کنید.


البته خب شما لینوکسی ها باید بهتر بدونید راه های نصب یک پکیج به اندازه راه های رسیدن به خدا زیاد هستش پس بهترین رو خودتون انتخاب کنید. :-)

یه ماشین مجازی

مورد اصلی که نیاز دارید یه ماشین مجازی هستش که باید داشته باشید برای اینکار میتونید از `genimotion` استفاده کنیدیا اینکه همون `android studio`رو نصب کنید که راحت تر هستش و هم براتون ادیتور هستش و هم ماشین مجازی داره و یه سری خوبی های دیگه که خود گوگل پیشنهادش داده.
اینجا ما از همون `android studio ` استفاده میکنیم که راحت تر هستش و داخل خود فروشگاه لینوکس وجود داره و میتونید با ‍‍کمک `snap` نصبش کنید به راحتی.

چون تو ایران هستید و گوگل ما رو تحریم کرده باید یکم دورش بزنید و میتونید از یک فیلتر شکن خوب استفاده کنید یا اینکه پروکسی تنظیم کنید برای کل سیستم یا اینکه فقط برای خود اندروید استودیو اینکار رو بکنید که زحمت آموزش کاملش رو دوستان کشیدن.

فقط یادتون باشه حتما `NDK` رو هم باید نصبش کنید.

خب بعدش میتونید داخل ترمینال بررسی کنید ببینید چیزایی که نصب کردید درست نصب شدن واینکه چه نسخه ای هستن.

میتونید از دستورای زیر استفاده کنید که من نتیجه سیستم خودم رو داخل عکس پایینی گذاشتم.

nodejs -v // npm -v // java -version
پکیج‌های مورد نیاز برای شروع به کار
پکیج‌های مورد نیاز برای شروع به کار

بعد از اون باید بریم یه سر بزنیم به `bashrc` و چند خط به آخرش اضافه کنیم مثل عکس زیر

تنظیمات sdk
تنظیمات sdk
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

اینها یک سری مسیر هستن که اندروید از اونها استفاده میکنه مثل مسیر sdk و یا emulator که البته اینها پیشفرض هستن و اگر شما مسیر رو تغییر داده باشید در زمان نصب میتونید اینها رو ویرایش کنید بعد فایل رو ذخیره میکنید.

فقط برای یادآوری بگم که `source .bashrc` رو یادتون نره :-)

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

خب من یکم حساسم و همه چیز رو پوشه بندی میکنم برای همین تمام برنامه های react-native رو میخوام بزارم داخل پوشه app برای همین این فایل رو میسازم و واردش میشم .

بعد از این با وارد کردن دستور زیر یک پروژه react-native خام برای شما ساخته میشه.البته `AwesomeProject` اسم پوشه هستش و میتونید تغییرش بدید و اسم پروژه رو روش بزارید.بهتره نام پروژه رو هم camelCase بنویسید.

اگر بعد از وارد کردن دستور زیر خطایی رخ داد احتمال زیاد میتونه به خاطر تحریم ها باشه که نمیتونه پکیج های مورد نظرش رو دانلود کنه با فعال کردن vpn میتونید مشکل رو حل کنید.

npx react-native init AwesomeProject

بعد از اینکه دستور بالا به طور کامل اجرا شد باید وارد پوشه اپلیکیشن در اینجا `AwesomeProject` بشید.

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

npx react-native run-android npm react-native start

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

زمانی که دستور دوم اجرا بشه شاید خطایی دیده بشه که با زدن R این مشکل حل میشه.

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

چند نکته مهم

سعی نکنید gradle رو به صورت سراسری روی سیستم نصب کنید چون در زمان ساخت پروژه امکان داره نسخه ها تداخل داشته باشه و پروژه اجرا نشه و خطا بده بهتون.
بعد از نصب وارد پوشه android بشید داخل پروژه و فایل `local.properties` رو پیدا کنید و اگرم وجود نداره خودتون بسازیدش و خط زیر رو داخلش قرار بدید که مسیری هستش که sdk درش ذخیره شده.
sdk.dir=/home/{path}/Android/Sdk
فایل با پسوند `jsx` رو `react native` تشخیص نمیده و خطا میده زمان وارد کردنش بهتره اونا رو با پسوند `js` ذخیره کنید و تنظیماتش یه پله بالاتره که اینجا جاش نیست
توجه کنید که نسخه های react-native ماهانه به روزرسانی میشن و میتونه زیاد باگ داشته باشه یعنی باگ داخل هستش باشه مثلا پکیجی رو که میخواد هسته نصب کنه اون نسخش وجود نداشته باشه و باید برید تغییرش بدید داخل node-modules یا امثال این شاید بهترین راهکار برای اینا این باشه که چند نسخه پایینتر که stable هستش رو نصب کنید


امیدوارم

react nativereactandroidlinux
Developer
شاید از این پست‌ها خوشتان بیاید