Төхөөрөмж дээр ажиллуулах

Аппаа хэрэглэгчдэд хүргэхийн өмнө тест хийж үзэх нь зүйтэй. React Native аппаа нэг төхөөрөмж дээр хэрхэн ажиллуулж үзэн, бэлэн болгох вэ гэдгийг энд зааж өгсөн болно.

Хэрэв та Expo CLI эсвэл Create React Native App ашиглан төслөө хийсэн бол та төхөөрөмж дээрээ Expo app доторх QR кодыг скан хийн аппаа урьдчилан харах боломжтой. Аливаа нэг төхөөрөмж дээр аппаа ажиллуулж, бэлэн болгохын тулд та Эхлэх заавар гэснээс натив кодын dependencies-ыг суулгах шаардлагатай.

iOS
Android

iOS төхөөрөмж дээр аппаа ажиллуулах

Android төхөөрөмж дээр аппаа ажиллуулах

Development OS: macOS Linux Windows

iOS төхөөрөмжид зориулж апп хийх бол танд Mac шаардлагатай. Эсвэл та Expo CLI ашиглан Expo client апп дээр аппаа хэрхэн ажиллуулахыг мэдэхийг хүсвэл Эхлэх заавах гэснийг уншина уу.

1. USB ашиглан төхөөрөмжөө холбох

iOS төхөөрөмжөө USB ашиглан Mac-тай холбоно. Төслийнхөө ios гэсэн фолдерт хандан .xcodeproj файлыг нээнэ. Хэрэв та CocoaPods ашигласан бол Xcode ашиглан .xcworkspace-ыг нээнэ үү.

Хэрэв та анх удаа аппаа iOS төхөөрөмж дээр ажиллуулах гэж байгаа бол та төхөөрөмжөө бүртгүүлэх хэрэгтэй болно. Xcode цэсээс Product гэснийг сонгоод Destination гэсэн рүү хандана. Тэндээсээ төхөөрөмжөө хайж олон сонгоно. Xcode төхөөрөмжийг чинь бүртгэх болно.

2. Код тохиргоо хийх

Apple хөгжүүлэгчийн аккаунт байхгүй бол шинээр бүртгүүлээрэй.

Xcode Project Navigator дотроо өөрийн төслөө сонгоод гол таргет файлаа сонгоно (төсөлтэй чинь ижилхэн нэртэй байх хэрэгтэй). тэгээд "General" гэснийг олоод "Signing" гэж ороод Apple хөгжүүлэгчийн аккаунт эсвэл баг чинь Team гэсэн цэсэнд байгаа эсэхийг харна уу. Таргет файлыг шалгахад мөн адилхан үйлдэл хийнэ (Tests гэж төгссөн байх ба гол таргетийн доор байна).

3. Аппаа хийж, ажиллуулах

Хэрэв бүх тохиргоо нь зөв хийгдсэн бол таны төхөөрөмж Xcode toolbar дээр build target гэж орсон байна. Мөн Төхөөрөмжүүд гэсэн (⇧⌘2) хэсэг дээр харагдана. Одоо та Build and run товчийг (⌘R) даран эсвэл Product цэсээс Run гэснийг сонгож болно. Таны апп төхөөрөмж дээр чинь тун удахгүй ажиллах болно.

Хэрэв танд ямар нэг асуудал тулгарвал Apple-ын Төхөөрөмж дээр аппаа ажиллуулж эхлүүлэх гэснийг уншина уу.

1. USB-гээр дибаг хийхийг идэвхжүүлэх

Ихэнх Android төхөөрөмж цаанаасаа зөвхөн Google Play-ээс татсан аппыг суулгаж, ажиллуулах тохиргоотой байдаг. Та хөгжүүлэлт хийж байх үедээ аппаа суулгахыг хүсвэл USB дибаг хийхийг идэвхжүүлэх хэрэгтэй.

Төхөөрөмж дээрээ USB дибаг хийхийг идэвхжүүлэхийг хүсвэл та эхлээд Settings → About phone гэж ороод "Developer options" цэсийг идэвхжүүлэх хэрэгтэй. Тэгээд доор байх Build number гэсэн дээр долоон удаа дарна. Та тэгээд Settings → Developer options гэж ороод "USB debugging" гэснийг идэвхжүүлнэ.

2. USB ашиглан төхөөрөмжөө залгах

React Native төслөө Android төхөөрөмж дээр ажиллуулахын тулд ямар тохиргоо хийхийг харъя. USB ашиглан төхөөрөмжөө хөгжүүлэлт хийсэн төхөөрөмжтэйгөө холбоорой.

Дараа нь lsusb ашиглан (Mac дээр lsusb суулгах) үйлдвэрлэгчийн кодыг шалгана. lsusb нь үүн шиг зүйл байна:

$ 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

Эдгээр мөрнүүд нь таны төхөөрөмжтэй холбогдсон USB төхөөрөмжүүдийг харуулж буй юм.

Таны утасны мэдээллийг харуулсан мөрийг та эндээс олох хэрэгтэй. Хэрэв эргэлзэж байвал, утсаа салгаад дахиад команд өгөөд үзээрэй:

$ 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 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

Утсаа салгасны дараа тухайн утасны моделийн мэдээллийг харуулж байсан мөр нь (энэ тохиолдолд "Motorola PCS" ) жагсаалтаас арилсан байгааг харж байна. Энэ мөр бидэнд хэрэгтэй гэсэн үг.

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

Дээрх мөрнөөс та төхөөрөмжийн ID-ын эхний дөрвөн орныг авна:

22b8:2e76

Энэ жишээ дээр бол 22b8 гэсэн үг. Motorola-ыг таних код бол энэ юм.

Та аппаа ажиллуулахын тулд энэ мэдээллийг udev rules дотроо хийх хэрэгтэй:

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

Дээрх командыг өгөхдөө 22b8 гэснийг олсон таних мэдээллээрээ солих хэрэгтэй.

Одоо төхөөрөмж чинь Android Debug Bridge буюу ADB-аар зав холбогдсон эсэхийг шалгахаар adb devices-ыг ажиллуулна.

$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

Баруун баганад device гэж харагдаж байвал уг төхөөрөмж холбогдсон гэсэн үг. Та нэг удаад зөвхөн нэг төхөөрөмж холбох боломжтой.

3. Аппаа ажиллуулах

Command prompt дээрээ доорхыг шивээд төхөөрөмж дээрээ аппаа суулган, ажиллуулаарай:

$ react-native run-android

Хэрэв "bridge configuration isn't available" гэсэн алдаа өгч байвал Adb reverse ашиглах гэснийг уншина уу.

Зөвлөмж

Та мөн React Native CLI ашиглан Release build-ыг гаргаж, ажиллуулах боломжтой (жишээ нь react-native run-android --variant=release).

Хөгжүүлэлтийн сервертэй холбох

Та мөн хөгжүүлэлтийн сервер ашиглан төхөөрөмж дээр хурдан давтах боломжтой. Танд ердөө компьютертойгоо ижил Wi-Fi-д холбогдсон байх шаардлагатай.Developer menu-ыг нээхийн тулд төхөөрөмжөө сэгсрэх хэрэгтэй. Тэгээд Live Reload гэснийг идэвхжүүлнэ. JavaScript код өөрчлөгдөх бүрт таны апп дахин ачаалах болно.

Асуудлыг шийдэх

Хэрэв ямар нэг асуудал гарвал таны Mac болон бусад төхөөрөмж чинь ижил сүлжээнд холбогдон, нэг нэгэнтэйгээ мэдээлэл солилцож болохоор байгаа эсэхийг шалгаарай. Нээлттэй ашиглаж болох утасгүй сүлжээнүүдийн ихэнх нь сүлжээ дэх бусад төхөөрөмж рүү хандахаас сэргийлсэн тохиргоотой байдаг. Та энэ тохиолдолд Personal Hotspot гэсэн функцийг ашиглах боломжтой.

Хөгжүүлэлтийн сервертэй холбогдох гэхэд алдаа бүхий улаан дэлгэц гарч ирэх магадлалтай ба ийм бичиг гарна:

http://localhost:8081/debugger-proxy?role=client холбогдох хугацаа дууссан байна. Та node proxy ажиллуулж байна уу? Хэрэв та төхөөрөмж дээр ажиллуулж байгаа бол RCTWebSocketExecutor.m дотор зөв IP хаяг байгаа эсэхийг шалгана уу.

Энэ асуудлыг хэрхэн шийдэх тухай дараах хэсгээс харна уу.

1. Wi-Fi сүлжээ

Таны лаптоп болон гар утас чинь ижил Wi-Fi сүлжээнд холбогдсон эсэхийг шалгана уу.

2. IP хаяг

Таны төхөөрөмж дээр скрипт нь IP хаягийг тань зөв таньсан эсэхийг шалгана уу (жишээ нь 10.0.1.123)

Report navigator табийг нээн сүүлийн Build -ыг сонгон xip.io гэснийг хайж олно. Апп дээрх IP хаяг нь таны төхөөрөмжийн IP хаяг болон .xip.io домэйнтай таарч байх ёстой (жишээ нь 10.0.1.123.xip.io).

3. Сүлжээ/рүтэр тохируулах

React Native нь таны төхөөрөмжийг танихдаа DNS service xip.io ашигладаг. Учир нь Apple ATS нь домэйн нэр биш IP хаяг бүхий URL-уудыг хориглодог ба хөгжүүлэгчийн сүлжээ нь local host нэрийг тохируулдаггүй. Зарим рүтэр нь local IP хүрээний аливаа асуудлыг DNS Servers шийдэхээс сэргийлсэн аюулгүй функцтэй байдаг.

nslookup ажиллуулан xip.io-ын асуудлыг шийдэх боломжтой эсэхийг харъя.

$ nslookup 10.0.1.123.xip.io

Хэрэв таны local IP хаягийн асуудлыг шийдэж чадахгүй бол xip.io үйлчилгээ нь унтарсан эсвэл рүтер хязгаарлаад байна гэсэн үг.

Рүтэрийн гадуур xip.io-ыг ашиглахын тулд:

Google DNS (8.8.8.8) ашиглахаар утасны тохиргоо хийнэ
Рүтэр дээрээ холбогдох аюулгүй байдлыг функцийг идэвхгүй болгоно

Хөгжүүлэгчийн сервертэй холбох

Та мөн хөгжүүлэлт хийсэн машин дээрээ хөгжүүлэгчийн серверийг холбон ажиллуулж аливаа нэг төхөөрөмж дээр хурдан дахин ажиллуулах боломжтой. Танд USB кабел, Wi-Fi сүлжээ байгаа эсэхээс хамаарч үүнийг хийх хэд хэдэн арга байна.

Арга 1: adb reverse ашиглах (энэ аргыг ашиглахыг санал болгож байна)

Хэрэв таны төхөөрөмж Android 5.0 (Lollipop) эсвэл үүнээс сүүлийн хувилбарыг ашиглаж байгаа, USB дибаг идэвхжүүлсэн бөгөөд хөгжүүлэлт хийсэн машинтай USB-ээр холбогдсон бол та энэ аргыг ашиглах боломжтой.

Command prompt дээр доорхыг ажиллуул:

$ adb -s <device name> reverse tcp:8081 tcp:8081

Төхөөрөмжийнхөө нэрийг хайж олохын тулд доорх adb командыг өгнө үү:

$ adb devices

Та Хөгжүүлэгчийн цэс шууд дахин ачаалах (Live Reload) функцыг одоо идэвхжүүлж болно. JavaScript код өөрчлөгдөх бүрт таны апп дахин ачаална.

Арга 2: Wi-Fi ашиглан холбох

Та Wi-Fi ашиглан хөгжүүлэлтийн сервертэй холбогдох боломжтой. Эхлээд та USB кабел ашиглан төхөөрөмж дээрээ аппаа суулгах хэрэгтэй. Нэгэнт холбосон бол дараа нь доорх зааврын дагуу утасгүйгээр дибаг хийх боломжтой. Танд эхлээд хөгжүүлэлт хийсэн машины одоогийн IP хаяг хэрэг болно.

System Preferences → Network дээрээс IP хаягийг харах боломжтой.

Command prompt-оо нээгээд ipconfig гэж бичээд машиныхаа IP хаягийг олно (нэмэлт мэдээлэл).

Терминалаа нээгээд /sbin/ifconfig гэж бичин машиныхаа IP хаягийг олно .

Таны компьютер, утас нэг ижил Wi-Fi сүлжээнд холбогдсон эсэхийг шалгана уу.
Төхөөрөмж дээрээ React Native аппаа нээнэ үү.
Танд алдаа заасан улаан дэлгэц харагдана. Санаа зоволтгүй. Доорх алхам нь үүнийг засах болно.
Апп доторх Хөгжүүлэгчийн цэс-ийг нээнэ.
Dev Settings → Debug server host & port for device гэсэн рүү оч.
Машиныхаа IP хаяг болон local dev server (10.0.1.1:8081 г.м) бичнэ.
Developer menu рүү буцаж очин Reload JS сонгоно.

Та Хөгжүүлэгчийн цэс Шууд дахин ачаалах функцыг одоо идэвхжүүлж болно. JavaScript код өөрчлөгдөх бүрт таны апп дахин ачаална.

Аппаа гаргахад бэлэн болгох

Та React Native ашиглан гайхалтай апп хийлээ гэж бодъё. Одоо тэгээд App Store дээр гаргах гээд тэсэн ядаж байгаа байх. Гаргах явц нь бусад натив iOS апптай л адил байна. Гэхдээ нэмэлт хэдэн зүйлсийг бодолцох хэрэгтэй.

Хэрэв та Expo ашиглаж байгаа бол Expo Guide-ыг уншина уу Бие даасан апп гаргах.

1. Апп хамгаалалтыг идэвхжүүлэх

App Transport Security (ATS) нь iOS 9 дээр гарсан функц бөгөөд HTTPS дагуу илгээгдээгүй HTTP хүсэлтүүдийг няцаадаг. Үүний улмаас HTTP урсгал блок хийгдэхэд хүрдэг. Хөгжүүлэлт хийсэн React Native сервер ч үүнд өртөнө. Хөгжүүлэлт хийх ажлыг илүү хялбар болгох үүднээс цаанаасаа React Native төслүүд дээр localhost-д ATS-ыг идэвхгүй болгосон байдаг.

Та ios/ фолдерын Info.plist файл доторх NSExceptionDomains дотроос localhost-ыг арилган апп гаргахаар бэлтгэхийн өмнө ATS-ыг дахин идэвхжүүлэх хэрэгтэй. Мөн та Info цонх дахь target properties-ыг нээн App Transport Security тохиргоог өөрчлөн Xcode дахь ATS-ыг дахин идэвхжүүлж болно.

Хэрэв таны аппликейшн бэлэн гарах үед HTTP хүсэлтэд хандах хэрэгтэй бол энэ нийтлэлээс ATS тохиргоог хэрхэн хийх тухай уншаарай.

2. Бэлэн гаргах төлөвийг тохируулах

App Store дээр бэлэн гаргах аппаа тохируулахын тулд Xcode дээр Release scheme-ыг ашиглах шаардлагатай. Release хийхээр хийсэн апп нь автоматаар апп доторх Хөгжүүлэгчийн цэсийг идэвхгүй болгосон байна. Ингэснээр апп бэлэн болох үед хэрэглэгчид санамсаргүйгээр цэс рүү орохоос сэргийлнэ. JavaScript кодыг дотоод сүлжээнд суулгаж өгөх ба та аливаа нэг төхөөрөмж дээр аппаа суулгаж, компьютертой холбоогүй ч тест хийж үзэх боломжтой юм.

Release scheme ашиглан гаргах аппынхаа тохиргоог хийхийн тулд Product → Scheme → Edit Scheme гэж орно. Хажуу талын хэсгээс Run гэдгийг сонгоно. Тэгээд Build Configuration гэснээс Release гэдгийг сонгон тохируулна.

Мэргэжлийн зөвлөгөө

Таны аппын хэмжээ нэмэгдэх тусам эхлэх дэлгэц шилжих үед цагаан гэрэл анивчин харагдаж, үндсэн аппликейшны харагдац нь гарч ирэх зүйл ажиглагдана. Хэрэв ийм зүйл тохиолдвол дэлгэц хооронд шилжих үед эхлэх дэлгэцийг харуулдаг байлгая гэвэл доорх кодыг AppDelegate.m руу нэмээрэй.

  // Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
  UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
  launchScreenView.frame = self.window.bounds;
  rootView.loadingView = launchScreenView;

Төхөөрөмж дээр ажиллуулах үед тогтмол багц гарч байдаг. Дибаг хийхэд ч гэсэн. Хэрэв та цаг хэмнэхийг хүсвэл Debug-ын багц гаргах үйлдлийг унтраах боломжтой. Ингэхдээ Xcode Build Phase Bundle React Native code and images дотор доорхыг нэмж өгнө:

 if [ "${CONFIGURATION}" == "Debug" ]; then
  export SKIP_BUNDLING=true
 fi

3. Аппаа бэлэн гаргах

⌘B гэж дарах эсвэл цэсний хэсгээс Product → Build гэж сонгон та аппаа бэлэн гаргах боломжтой. Гаргахад бэлэн болсон тохиолдолд та бета шалгагч руу илгээн, App Store руу оруулах боломжтой болно.

Мөн та --configuration гэсэн сонголтыг Release (react-native run-ios --configuration Release г.м)-тэйгээр хамт хэрэглэн React Native CLI-ыг ашиглан энэ үйлдлийг гүйцэтгэх боломжтой.

Аппаа ажиллуулахад бэлэн болгох

Та React Native ашиглан гайхалтай апп хийлээ гэж бодъё. Одоо тэгээд Play Store дээр гаргах гээд тэсэн ядаж байгаа байх. Гаргах явц нь бусад натив Android апптай л адил байна. Гэхдээ нэмэлт хэдэн зүйлсийг бодолцох хэрэгтэй. Илүү дэлгэрэнгүй унших бол generating a signed APK гэснийг харна уу.