Як запустити додаток React Native на iOS

Нещодавно я почав розробляти додаток React-Native для iOS. Це був мій перший напад на розробку власних програм. Я був здивований легкістю та рівнем абстракції, які надає інтерфейс командного рядка React-Native. Мені також було цікаво зрозуміти, що відбувається під капотом, коли React-Native запускає додаток на пристрої або симуляторі.

Я витратив багато часу, переглядаючи відповідний код. Не було жодного місця, яке б підсумувало, що React-Native робить, щоб програма працювала. Частково це було мотивацією придумати цей твір. Я хочу допомогти будь-якій іншій людині, яка починає знову із розробкою програми React-Native.

React-Native надає утиліти командного рядка для запуску програми на симуляторах / пристроях iOS та Andriod. Без зайвих сумнівів, давайте спробуємо зрозуміти, що і як слід запускати додаток React-Native на iOS.

За сценою

React-native забезпечує цю акуратну утиліту під назвою init. Він створює для вас шаблон власного додатка. Цей шаблон створює відповідні файли проекту Xcode у папці iOS програми.

Програми React-Native можна запустити на симуляторах iOS / фізичних пристроях, виконавши наступну команду в кореневій папці програми:

react-native run-ios

Успішне виконання відкриє програму на симуляторі або підключеному пристрої. Щоб це сталося, є купа кроків, які виконуються, коли ми запускаємо вищезазначену команду.

команда run-ios

React-Native надає ряд утиліт командного рядка для роботи з додатком. Їх можна знайти в папці local-cli модуля вузла React-Native. run-ios - це одна з таких утиліт, яка викликає runIOS()функцію, визначену у файлі runIOS.js. run-ios приймає певні параметри, такі як:

#Launch the app on a specific simulatorreact-native run-ios --simulator "iPhone 5"
#Pass a non-standard location of iOS directoryreact-native run-ios --project-path "./app/ios"
#Run on a connected device, e.g. Max's iPhonereact-native run-ios --device "Max\'s iPhone"
#Build the app in Release modereact-native run-ios --configuration Release

Вибір пристрою / симулятора

Коли не вказано жоден пристрій, run-iosза замовчуванням запускатиме програму в режимі налагодження на симуляторі. Це робиться шляхом виконання серії xcrun simctlкоманд. Спочатку вони перевіряли список доступних симуляторів на Mac, вибирали один із них, а потім завантажували вибраний симулятор.

Крім того, якщо ви хочете запустити програму на фізичному пристрої, підключіть пристрій до Mac, а потім передайте деталі пристрою run-iosкоманді.

Наступним кроком є ​​створення проекту Xcode програми.

Створення коду програми

Зазвичай проект Xcode програми React-Native можна знайти в папці iOS, яка знаходиться в кореневій папці. Проект Xcode будується за допомогою xcodebuildкоманди. Будь-які параметри, вказані, run-iosнаприклад, конфігурація тощо, передаються цій команді.

За замовчуванням проект Xcode вбудований у схему налагодження. Після успішного створення проекту додаток встановлюється та запускається на симуляторі або підключеному пристрої.

Групування програмного коду в режимі налагодження

Під час процесу розробки React Native динамічно завантажує наш код JavaScript під час виконання. Для цього нам потрібен сервер, який зв’яже код нашої програми та надасть його за потреби.

Поки проект Xcode будується в режимі налагодження, екземпляр сервера Metro також запускається паралельно. Metro - це пакет, який використовується програмами, створеними за допомогою інтерфейсу командного рядка React-Native (CLI). Він використовується для об’єднання коду нашого додатка в розробці. Це допомагає нам швидше та простіше налагоджувати, дозволяючи гаряче перезавантаження тощо.

Сервер Metro за замовчуванням налаштований на запуск через порт 8081. Після запуску програми в симуляторі на сервер надсилається запит на комплект.

#Code in AppDelegate.m sends the request for the bundle: #index.bundle to serverjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];

Потім сервер завантажує всі необхідні залежності, поєднує код програми JavaScript і відправляє його назад до програми. Після цього кроку ви зможете побачити додаток, що працює на тренажері або підключеному пристрої.

Групування програмного коду в режимі випуску - Попередньо запакуйте пакет JavaScript

У режимі випуску ми повинні попередньо упакувати пакет JavaScript і розповсюдити його в нашому додатку. Для цього потрібна зміна коду, щоб він знав завантаження статичного пакета. У файлі AppDelegate.m змініть jsCodeLocation, щоб вказувати на статичний пакет, якщо ви не перебуваєте в режимі налагодження.

#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Тепер це буде посилання на main.bundleфайл ресурсу. Цей файл створюється під час Bundle React Native code and imagesфази збірки в Xcode. На цьому етапіreact-native-xcode.shсценарій запущенийякий поєднує код програми JavaScript. Цей скрипт можна знайти в папці скриптів модуля React-Native.

Створення програми з Xcode

Крім того, проект Xcode також може бути побудований у Xcode на Mac, замість використання React-Native CLI. Після цього додаток можна запустити на симуляторі, вибраному з параметрів Xcode, або на підключеному фізичному пристрої.

Сподіваюсь, це допомогло вам зрозуміти різні кроки, які відбуваються, коли ми запускаємо просту react-native run-iosкоманду, яка чарівним чином відкриває програму на iOS.

Деякі частини наведеної тут інформації надходять із домашньої сторінки React-Native. Решта - це результат того, що я переглядаю код :)