نصب و راه اندازی React Native در لینوکس
در این مقاله قصد دارم React Native رو در لینوکس(Linux ) نصب کنم.React native بین توسعه دهندگان Android و Ios به دلیل cross-platform بودنش بسیار محبوب و دوست داشتنتیه.React Native قواعد توسعه اپلیکیشن ها رو تغییر داد و با استفاده از این فریمورک هر توسعه دهنده ای میتونه با استفاده از یک زبان یکسان برنامه های Android و Ios رو توسعه بده.برای اینکه بیشتر بودنید React Native چیه میتونید مقاله React Native چیست رو بخونید.
شما بنا به دلایل ایدئولوژیکی و یا کارایی از لینوکس استفاده میکنید،البته شاید شما هم پولتون مثل من به اپل نمیرسه.به هر حال اگه شما به سمت React Native اومدید حدس میزنم از توسعه native اندروید خسته و ناامید شدید یا با javascript برنامه نویسی میکردین و سعی دارید توانایی هاتون رو در نوشتن اپلیکیشن موبایل استفاده کنید.خبر خوب اینکه تجربه برنامه نویسی با React Native بسیار خوبه.خبر بد اینکه نصب React Native روی لینوکس(Linux )کمی دشواره و docs سایت React Native یک مقدار کمه.
پیشنیاز
قبل از اینکه از این راهنما استفاده کنید،شما باید Android SDK رو نصب کنید و یک برنامه مبتنی بر جاوا “Hello World” برای اندروید اجرا کنید.
نصب NodeJs
اولین کاری که باید انجام بدهیم نصب NodeJs است.برای نصب NodeJs از APT ترمینال را باز کنید و دستورات زیر را وارد کنید:
|
1 2 3 |
sudo apt-get install -y build-essential curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - sudo apt-get install -y nodejs |
نصب NPM
بعد از نصب NodeJs شما باید NPM (Package Manager Node) رو نصب کنید.شما میتونید برای بررسی نصب NPM از دستور which npm در ترمینال استفاده کنید.
اگه شما NPM رو داشته باشید چیزی شبیه این در ترمینال میبینید
|
1 |
$ /usr/local/bin/npm |
و اگه NPM رو نداشته باشید،شما با این صحنه روبرو میشید
|
1 2 3 |
$ which npm npm not found $ |
اگه NPM رو نداشتید،دستور زیر رو برای نصب NPM اجرا کنید
|
1 |
curl http://npmjs.org/install.sh | sh |
نصب watchman
watchman یک ابزار برای تماشای filesystem که توسط Facebook توسعه داده شده.برای گرفتن بهترین نتایج بهتره که watchman رو نصب کنید.
دستورات زیر را در ترمینال اجرا کنید
|
1 2 3 4 5 6 7 |
git clone https://github.com/facebook/watchman.git cd watchman git checkout v4.1.0 # the latest stable release ./autogen.sh ./configure make sudo make install |
نصب flow
گام بعدی نصب چک کننده استاتیک برای جاوا اسکریپته.
|
1 2 3 4 |
wget https://facebook.github.io/flow/downloads/flow-linux64-latest.zip unzip flow-linux64-latest.zip cd flow sudo mv flow /usr/local/bin/flow |
نصب React Native
خوب الان زمان این رسیده که React Native رو نصب کنیم.کافیه که فقط از دستور زیر استفاده کنیم
|
1 |
sudo npm install -g react-native-cli |
برای کسانی که NPM رو از روش های دیگری نصب کردند، از دستور زیر استفاده کنید
|
1 |
npm install -g react-native-cli |
ایجاد پروژه
خوشبختانه React Native با موفقیت نصب شد.حالا باید یک پروژه ایجاد کنیم.برای ایجاد پروژه از دستور زیر استفاده کنید.
|
1 |
react-native init AwesomeProject |
ایجاد پروژه چندین دقیقه طول میکشه بنابراین ترمینال رو قبل از ایجاد کامل پروژه نبندید.
راه اندازی یک Android Device
خب الان پروژه منتظر ماست،تقریبا آماده هستیم که کد رو اجرا کنیم.اما برای اجرای کد به یک emulator یا real Android device نیاز داریم.در این مقاله ما از یک real Android device برای اجرای کد استفاده میکنیم.
اولین کاری که باید انجام بدیم اینکه گوشی رو با کابل به سیستم وصل کنیم و اتصال رو با دستور lsusb بررسی کینم.
|
1 2 3 4 5 6 7 8 |
$ lsusb Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 001 Device 003: ID 22b8:2e76 Motorola PCS Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub |
با اسنفاده از خط زیر،شما باید شناسه دستگاه رو بردارید:22b8:2e76
|
1 |
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS |
شما باید برای اجرا،این کد رو به قوانین udev خود اضاف کنید.بنابراین ابتدا text editorr مورد علاقتون رو باز کنید.من از vim استفاده میکنم:
|
1 |
sudo vim /etc/udev/rules.d/51-android.rules |
و خط زیر رو به این فایل اضافه کنید
|
1 |
SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" |
حالا باید چک کنید که گوشی شما به درستی به ADB متصل است
|
1 2 3 4 5 |
$ adb devices List of devices attached TA9300GLMK device $ |
اجرا پروژه
حالا ما یک پروژه آماده داریم که منتظر ماست.
در ترمینال اول:
|
1 2 |
cd AwesomeProject react-native start |
در ترمینال دوم:
|
1 2 |
cd AwesomeProject react-native run-android |
با شکست روبرو شدید.کد زیر رو امتحان کنید
|
1 |
adb reverse tcp:8081 tcp:8081 |
برنامه با موفقیت اجراشد؟
- فایل
index.android.jsرو در text editor باز کنید. - “Welcome to React Native” رو به “Welcome to React Native on Android” تغییر بدید.
- در menu button(F2 by default, or ⌘-M in Genymotion) رو کلیک کنید و Reload JS برای نمایش تغییرات انتخاب کنید.
- دستور
adb logcat *:S ReactNative:V ReactNativeJS:Vرو در ترمینال اجرا کنید تا app’s logs رو ببینید.
امیدوارم که این مقاله بهتون کمک کرده باشه تا پا به دنیای جذاب و دوست داشتنی React Native بزارید.برای شروع هم میتونید دوره آموزش مقدماتی React Native رو مشاهده کنید.
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
نمایش عکس های گوشی در react native (ری اکت نیتیو)
6 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
چطور میشه رو لینوکس ios رو هم ران کرد؟ این آموزش فقط برای آندرویدش بود
سلام امید عزیز.
برای ios باید حتما mac داشته باشی.
“A Mac is required in order to build your app for iOS devices”
این متنی هست که در داکیومنت سایت react native بیان شده
سلام
ممنون از توضیحات خوبتون
برای ساخت اپلیکیشن iOS باید چیکار کنیم؟ توضیحات فقط برای اندروید هست.
سلام علی عزیز.
در دوره آموزش مقدماتی React Native نحوه نصب و راه اندازی در mac نوضیح داده شده
سلام خسته نباشید .
ی مشکل تو اجرا ری اکت دارم که خطای زیر رو میده خیلی هم گشتم ولی مشکل نتونستم حل کنم .
The development server returned response error code: 500
URL: http://10.0.3.2:8081/index.delta?platform=android&dev=true&minify=false
سلام.لطفا یک پروژه با نسخه 0.55.4 ایجاد کنید
وموارد زیر رو امتحان کنید:
مطمئن شوید که packager server در حال اجراست.
مطمئن شوید که گوشی یا شبیه ساز به سیستمتان متصل است و usb debugging فعال است.دستور adb devices رو اجرا کنید تا لیست دستگاه های موجود رو ببینید.
مطمئن شوید که حالت پرواز غیرفعال است.
اگه از یک گوشی برای تست و توسعه استفاده میکنید دستور ‘adb reverse tcp:8081’ رو اجرا کنید تا یک درخواست به گوشی فرستاده بشه.
اگه گوشی و سیستمتان به یک wifi متصل هست، ‘Debug server host & Port for device’ رو در «‘Dev settings» به آدرس IP دستگاه و پورت Dev سرور خودتون تنظیم کنید – به عنوان مثال۱۰٫۰٫۱٫۱:۸۰۸۱٫