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

1656522850 kak zapustit prilozhenie react native na ios

от Soujanya PS

G3MMcylb2HPrpSi50yH6qM39qPcRawi7fP5x

Недавно я начал разрабатывать приложение 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 построен по схеме Debug. После успешного создания проекта, программа устанавливается и запускается на симуляторе или подключенном устройстве.

Сбор кода программы в режиме отладки

При разработке 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 Build Phase в Xcode. Во время этой фазы, react-native-xcode.sh скрипт запускается который объединяет код JavaScript. Этот скрипт можно найти в папке сценариев модуля React-Native узла.

Создание программы с Xcode

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

bMWy-EbznFYSdPqaUKfVbFIvv2YSfmlulDkS
Параметры меню Xcode для создания программы и запуска ее на симуляторе

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

Некоторые части предоставленной здесь информации взяты с домашней страницы React-Native. Остальное – продукт моего подсмотра за кодом 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *