ساخت Application های Cross platform با React native

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

تو دنیای تولید نرم افزار هم همین طوره یا سریع develop کن یا جایگزین شو!

تو این نوشته سعی دارم بهتون نحوه ساخت برنامه های چند پلتفرمی یا (Cross platform) رو با استفاده از React Native توضیح بدم، در ادامه با ما باشید.

قبل از شروع چند تا از ابزارهایی که برای ادامه کار نیاز داریم رو معرفی کنم:

NodeJS

یک برنامه run-time چند پلتفرمی برای توسعه نرم افزار های جاوااسکریپت که معمولا به عنوان یک سرور جاوااسکریپتی مورد استفاده قرار میگیرد. که برای دانلود و نصب می توانید وارد وب سایت شده و با توجه به سیستم عامل خود پکیج را دانلود کنید و روی سیستم نصب کنید.

NPM

یک package manager برای جاوااسکریپت هست که به صورت پیش فرض توسط NodeJS برروی سیستم شما نصب می شود.

JDK

به این نکته توجه کنید که بعد از نصب JDK حتما JAVA_HOME را در سیستم خود تنظیم کنید.

SDK

بعد از دانلود SDK شما باید متغیرهای را برروی سیستم خود تنظیم کنید، برای این کار می توانید از این لینک کمک بگیرید.

بعد از نصب ابزار های بالا شما باید React Native را یک بار بر روی سیستم نصب کنید برای این کار از دستور زیر در ترمینال استفاده کنید:

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

که PROJECT_NAME اسم پروژه ای هست که قرار هست ساخته بشه!

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

این دستور برنامه‌ی sample روی AVD اجرا می کند.

خوب برنامه اندروید اجرا شد، برای اجرای نسخه وب با ما همراه باشید.

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

ما از babel برای ترجمه کد های react-native به زبان اجرایی برای مرورگر استفاده می کنیم، و از webpack نیز برای bundle کردن و اجرای پروژه استفاده میکنیم.

بعد از اجرای دستورات بالا فایل package.json شما باید به شکل زیر باشد:

در قسمت script یک دستور با نام serve نوشته ام که در هنگام اجرای پروژه به جای این که به مسیر web pack برای اجرای پروژه رجوع کنم از این دستور برای اجرای پروژه استفاده می کنم.

حال فایل های زیر را در root پروژه خود بسازید:
index.html