Как запустить iOS-приложение через React Native

image

Это перевод оригинальной статьи программистки, ведущей блог под псевдонимом Soujanya PS. Она профессионал своего дела и любит не только разрабатывать приложения и сервисы, но и писать об этом статьи. Вот ее обзор запуска iOS-приложения с использованием фреймворка React Native.

Не так давно я начала использовать React Native для программ под iOS. Это мое первое глубокое погружение в среду разработки нативных приложений. Замечу, что я была удивлена легкостью всего процесса, а также уровнем абстракции, который обеспечивает интерфейс командной строки React Native. Собственно, это стало одним из факторов, который побудил меня написать об этом фреймворке. Я хотела бы поделиться собственным опытом с теми, кто только начал работать с ним.

Skillbox рекомендует: «Мобильный разработчик PRO».
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».


React Native обеспечивает инструменты командной строки для запуска приложений под iOS и Android на эмуляторах и устройствах. Давайте попробуем понять, что и как нужно сделать, чтобы развернуть React Native приложение под iOS.

Собственно запуск


React Native предоставляет отличную утилиту, которая называется init. Она дает шаблон приложения, одновременно создавая релевантные файлы проекта Xcode в iOS-папке этого приложения.

Его, в свою очередь, можно запустить как в среде эмулятора 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 simulator
react-native run-ios --simulator «iPhone 5»

#Pass a non-standard location of iOS directory
react-native run-ios --project-path »./app/ios»

#Run on a connected device, e.g. Max’s iPhone
react-native run-ios --device «Max’s iPhone»

#Build the app in Release mode
react-native run-ios --configuration Release

Выбор устройства/эмулятора


Если устройство не задано, то run-ios запустит режим отладки приложения в эмуляторе по умолчанию. Это возможно благодаря выполнению серии команд xcrun / simctl. Сначала идет проверка списка доступных эмуляторов, выбор одного из них и загрузка приложения в его среде.

Если вы хотите запустить приложение на физическом устройстве, просто подключите его к вашему ноутбуку и задайте детали через run-ios.

Следующий шаг — создание проекта приложения Xcode.

Код приложения


Обычно Xcode-проект приложения React Native располагается в папке iOS в корневой директории. Проект Xcodе создается при помощи команды xcodebuild. Любые параметры, ранее заданные для run-ios, передаются этой команде.

Как только проект создан, приложение устанавливается и запускается на эмуляторе или подключенном устройстве.

Добавление кода приложения в режиме отладки


В течение всего процесса разработки React Native динамически подгружает ваш код. Для того чтобы все шло гладко и код был доступен по мере необходимости, понадобится сервер.

Пока Xcode-проект в процессе отладки, параллельно с ним запускается сервер Metro. Он используется приложениями, которые создаются при помощи интерфейса командной строки React Native. Все это позволяет ускорить и упростить процесс при помощи «горячей» перезагрузки и других методов.

По умолчанию Metro «слушает» 8081 порт. Как только приложение запущено в эмуляторе, отправляется запрос серверу.

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


Сервер подгружает все необходимые зависимости, собирает код JavaScript и отправляет его приложению. После этого шага вы можете видеть работающее приложение в эмуляторе или на подключенном устройстве.

Упаковка пакета JavaScript


В release-mode необходимо предварительно упаковать JavaScript, разместив его в приложении. Для этого нужны некоторые изменения, обеспечивающие возможность загрузки статического пакета. Изменить нужно jsCodeLocation в файле AppDelegate.m, указав местоположение статического пакета вне режима отладки:

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


Теперь это указание на ресурсный файл main.bundle, который появился в ходе обработки проекта Xcode.На этом этапе запускается скрипт react-native-xcode.sh. Его можно найти в папке сценариев модуля React Native.

Создание приложения из Xcode


Xcode-проект можно создать и прямо на Maс вместо использования React Native CLI. После создания приложение можно также запустить на эмуляторе, выбранном в опциях Xcode, или же на физическом устройстве.

b8ad411dfc95eb3d15306cf048d4365f.png

Надеюсь, что этот материал помог вам понять процессы, которые запускаются в момент выполнения react-native run-ios команды, которая творит волшебство и позволяет выполнять приложение в среде iOS.

Skillbox рекомендует:

© Habrahabr.ru