Как запустить iOS-приложение через React Native
Это перевод оригинальной статьи программистки, ведущей блог под псевдонимом 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, или же на физическом устройстве.
Надеюсь, что этот материал помог вам понять процессы, которые запускаются в момент выполнения react-native run-ios команды, которая творит волшебство и позволяет выполнять приложение в среде iOS.
Skillbox рекомендует:
