مراحل آمادهسازی react-native
با فراگیر شدن جاوااسکریپت و توسعهی فریمورکهای مختلف برای آن، کار توسعهی نرمافزار از هر زمان دیگری راحتتر شده و با یاد گرفتن جاوااسکریپت میتوانید برای هر دستگاهی برنامه بسازید. یکی از فریمورکهای مطرح جاوااسکریپت که توسط facebook توسعه داده شده است، react-native نام دارد که برای ساخت برنامههای android و ios بهکار میرود. در این مقاله مراحل اولیهای را که قبل از شروع استفاده از react-native احتیاج دارید آوردهایم.
*اگر با خواندن documentی که خود facebook نوشته مشکلی ندارید میتوانید از این لینک استفاده کنید.
با ما همراه باشید تا با طی مراحل زیر react-native را روی windows برای توسعهی android راه اندازی کنیم.
نصب node و python و jdk
قبل از هر قدم دیگری باید پیشنیازهای react-native را فراهم کنیم. این فایلها را میتوانید از لینکهای زیر دریافت کنید:
— لینک سایت node (جدیدترین نسخهی LTS را دانلود کنید. همچنین برای نصب node میتوانید از این مقاله استفاده کنید)
— لینک سایت python (نسخهی ۲ را دانلود کنید)
— jdk را میتوانید با جستجو در گوگل از سایتهای فارسی دانلود کنید.
نصب Android Studio
قدم بعدی برای اجرای react-native، نصب android studio است(موقع دانلود نسخهای را بگیرید که شامل android sdk میباشد).
*ترجیحا برای بار اولی که android studio را اجرا میکنید اتصال خود به اینترنت را قطع کنید.
بعد از نصب android studio نوبت به نصب کردن بستههای مورد نیاز از طریق android sdk است. android studio را باز کرده و از قسمت بالا(toolbar) گزینهی sdk manager را انتخاب کنید. بعد از حدود ۳۰ ثانیه(وابسته به سرعت اینترنت) لیستی از بستههای قابل دانلود ظاهر میشود. فلش کنار android 6.0 را بزنید. از بین بستههای زیر مجموعه، ۴ بستهی زیر را انتخاب کنید:
— Google APIs
— Android SDK Platform 23
— Intel x86 Atom_64 System Image
— Google APIs Intel x86 Atom_64 System Image
از قسمت بالا، تب SDK Tools را انتخاب کنید. در لیست ظاهر شده دنبال Android-SDK Build-Tools بگردید و فلش کنار آن را بزنید، از بین بستههای موجود، بستهی زیر را انتخاب کنید:
— ۲۳.۰.۱
روی OK کلیک کنید و منتظر بمانید تا بستههای انتخاب شده نصب شوند.
*بستههای مورد نظر را همچنین میتوانید به صورت جداگانه دانلود کنید و در محل sdk کپی کنید. در اینصورت نیازی به اینترنت با سرعت بالا ندارید.
متغیرهای سراسری(global variables)
برای اجرای react-native نیاز داریم تا دو متغیر سراسری JAVA_HOME و ANDROID_HOME را تعریف کنیم. برای این کار:
- روی this pc راست کلیک کرده و properties را بزنید.
- وارد advanced system settings بشوید.
- گزینهی Environment Variables… را بزنید.
- در قسمت system variables گزینه new را بزنید و در پنجرهی باز شده در قسمت Variable name و Variable value مقدارهای زیر را وارد کنید:
- ANDROID_HOME
- C:\Users\{user}\AppData\Local\Android\sdk (اگر مسیر نصب sdk را تغییر دادید، در اینجا مسیر نصب sdk را وارد کنید، در غیر اینصورت فقط بهجای {user} اسم user ویندوز خود را بنویسید).
- روی ok کلیک کنید.
- یکبار دیگر new را بزنید و اینبار مقدارهای زیر را وارد کنید:
- JAVA_HOME
- C:\Program Files\Java\jdk1.8.0_144 (بسته به نسخهی jdk که نصب کردید، قسمت آخر را باید عوض کنید).
- روی ok کلیک کنید.
نصب react-native-cli
بعد از انجام تمام کارهای قبلی، نوبت به ابزار اصلی برای ارتباط با react-native میرسد. برای این کار دستور زیر را در command-line وارد کنید:
npm install -g react-native-cli
بعد از انجام این کار، از این به بعد میتوانید دستور react-native را در command-line اجرا کنید.
نصب genymotion
برای تست کردن برنامههای اندروید نیاز به یک شبیهساز داریم. از بین شبیهسازهای موجود، genymotion گزینهی نسبتا خوبی است.
*اگر در اجرای genymotion در ویندوز ۱۰ به مشکل خوردید، virtualbox را جدا دانلود کرده و نصب کنید.
بعد از نصب genymotion باید یکی از شبیهسازهای آن را نصب کنیم. برای انجام اینکار genymotion را اجرا کنید و گزینهی add را بزنید. از لیستی که ظاهر میشود دستگاه مورد نظر را انتخاب کنید تا دانلود شود.(اگر میخواهید دستگاهها را به صورت جداگانه دانلود کنید میتوانید با جستجو در گوگل چند مورد از آنها را پیدا کنید).
ساخت پروژهی react-native
بعد از انجام تمام مراحل بالا، آماده هستید تا اولین پروژهی react-native خود را بسازید. برای اینکار در command-line دستور زیر را بنویسید تا پروژهای در محلی که command-line قرار دارد ایجاد شود:
react-native init first
به جای first اسم پروژهای که میخواهید بسازید را بنویسید.
انجام اینکار نیز به اینترنت احتیاج دارد و کمی زمانبر است. بعد از اتمام این مرحله، وارد پوشهی پروژه شوید و دستور زیر را در command-line اجرا کنید:
react-native run-android
* شبیهساز را قبل از اجرای دستور بالا اجرا کنید.
اگر تصویر زیر را در شبیه ساز مشاهده کردید یعنی تمام مراحل را به درستی طی کردهاید و آمادهاید که کار با react-native را شروع کنید.
اگر در اجرای هرکدام از مراحل به مشکل برخورد کردید، در انجمن صفرتاقهرمان با ما در میان بگذارید.
موفق باشید.
مطالب زیر را حتما مطالعه کنید
جاوا اسکریپت چیست؟
آموزش Gradle – اهمیت Project Automation
درک مفهوم کدنویسی تمیز در اندروید
5 هک ساده برای کاهش سایز فایل APK
آشنایی با RecyclerView در اندروید
Open/Closed Principle در قوانین Solid
2 Comments
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
سلام
من بعد از وارد کردن دستور
react-native run-android
در پوشه ی پروژه ، خطای زیر را دریافت میکنم
Scanning folders for symlinks in E:\nodejs\app\test\node_modules (47ms)
Android project not found. Maybe run react-native android first?
متاسفانه از طریق expo هم نمیتونم پروزه رو در شبیه ساز ران کنم و اونجا هم خطای عدم اتصال میگیرم
ممنونم میشم من رو راهنمایی کنید
سلام
اگه میشه دستوراتی که قبل از این دستور وارد کردید و اسکرینشات از صفحه ی ارور بفرستید تا بتونم دقیقتر راهنماییتون کنم.