Xcode для разработчиков React Native: Учебник и лучшие практики

При разработке мобильного приложения необходимо создать и запустить приложение на симуляторе или устройстве, чтобы протестировать его и просмотреть изменения. Это отличается от работы с веб-приложениями, где вам не нужно каждый раз создавать приложение.

При работе с React Native и iOS в качестве инструмента сборки обычно используется Xcode. Создание приложений, работающих на iOS, требует хотя бы некоторых знаний Xcode.

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

Вот что мы рассмотрим:

Что такое Xcode?

Xcode – это IDE и редактор кода, созданный компанией Apple для того, чтобы помочь разработчикам создавать продукты Apple – мобильные приложения для iOS и настольные приложения для macOS.

Xcode – это полноценная среда, содержащая набор интегрированных инструментов и приложений, предназначенных для помощи во всех процессах разработки, включая тестирование, создание, развертывание, компиляцию и отладку.

Создание приложения React Native на iOS с помощью Xcode

Вы можете создать приложение React Native либо на симуляторе, либо на реальном устройстве. Если вы собираетесь запустить его на устройстве iOS или симуляторе, часто требуется использование Xcode.

Вы можете создать приложение React Native либо с помощью React Native CLI, который позволяет запускать команды сборки из терминала, либо с помощью Xcode. Я предпочитаю использовать Xcode по следующим причинам:

• Xcode показывает больше подробностей о процессе сборки в реальном времени, например, журналы.
• Xcode позволяет создавать настраиваемые конфигурации сборки. При непосредственном использовании Xcode вы можете настроить процесс сборки по своему вкусу. Например, вы можете выбрать тип симулятора или устройства, собрать с помощью пользовательской схемы и т. д.
• React Native CLI запускает некоторые функции Xcode с помощью скриптового кода под капотом. CLI обеспечивает простоту запуска и сборки кода с помощью всего одной командной строки.
• При использовании только CLI вы можете столкнуться с неожиданными проблемами при сборке. Использование Xcode напрямую дает вам четкую картину и помогает определить причину той или иной проблемы.

Давайте рассмотрим, как собрать и запустить приложение React Native с помощью React Native CLI. Затем мы сделаем то же самое непосредственно на реальном устройстве.

Использование React Native CLI

React Native CLI – это простой и понятный способ запустить ваше приложение React Native. Когда вы впервые устанавливаете приложение React Native с помощью CLI, он предоставляет простые инструкции и позволяет запустить, собрать и запустить приложение одной простой командой:

Вы также можете использовать npx:

По сути, это запускает кучу скриптов в фоновом режиме, которые взаимодействуют и инструктируют Xcode о запуске и обеде симулятора. Если вы не укажете симулятор, CLI использует симулятор по умолчанию, который он найдет в Xcode. Вот как указать CLI, на каком симуляторе вы хотите запустить приложение:

Если вы хотите запустить приложение на устройстве, сначала убедитесь, что устройство подключено к компьютеру через USB. Затем запустите команду CLI с параметром –device “iPhone name”:

Использование Xcode напрямую

Второй способ создания и запуска приложения React Native – это использование Xcode напрямую, именно этот способ использую я.

В Xcode перейдите в меню Файл → Открыть и перейдите в каталог проекта. В папке iOS выберите appName.xcodeproject или appName.xcodeworkspace, если он у вас есть.

Вы можете создать приложение, перейдя на вкладку навигатора ( Product→ Build ) или используя сочетание клавиш ⌘ + B :

Хорошей практикой является использование симулятора для запуска и тестирования приложения. Однако иногда необходимо проверить точность пользовательского интерфейса на реальном устройстве.

Запуск приложения React Native на реальном устройстве iOS

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

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

Чтобы запустить и создать React Native на реальном устройстве, вы должны иметь:

• iOS-устройство; macOS позволяет запускать iOS-приложения только на iOS-устройствах (iPhone, iPad, Apple TV и т.д.).
• USB-разъем для подключения устройства к компьютеру Mac
• Учетная запись разработчика Apple.

После подключения iPhone, Xcode покажет подключенные устройства в качестве цели:

В моем случае имя моего iPhone – “iPhone”. Вы можете увидеть другое имя для своего устройства, например “iPhone Тони”.

Более 200 тысяч разработчиков используют LogRocket для создания лучшего цифрового опыта

Узнайте больше →

Выберите устройство, на котором вы хотите создать и запустить приложение, а затем нажмите кнопку сборки. React Native CLI автоматически откроет терминал и запустит сервер. Если он еще не запущен, вы можете перейти в терминал и выполнить команду npm start :

Если сборка прошла успешно, приложение автоматически запустится на вашем устройстве:

Чтобы убедиться, что устройство подключено к серверу, вы можете перейти в терминал и нажать r для перезагрузки приложения или d для открытия меню разработчика. Также можно встряхнуть устройство, чтобы вызвать меню разработчика.

Вы должны увидеть, что перезагрузка в реальном времени также работает:

По мере продвижения по пути разработки React Native вы столкнетесь с неожиданными проблемами, особенно при сборке приложения. Эти проблемы обычно возникают из-за несовпадения версий пакетов React Native и iOS или инструментов, используемых для сборки приложения, например, Xcode.

Со временем вы познакомитесь с этими проблемами и станете более эффективными в их решении.

Использование симулятора для запуска и тестирования вашего кода

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

Отладка

Симулятор предоставляет множество функций для отладки вашего приложения, особенно функций доступности. Например, для проверки доступности цветов можно включить “Слои, смешанные с цветом”.

В Xcode откройте вкладку Отладка:

Тестирование темного режима

Если у вас последняя версия Xcode (12.4), в ней есть функция, позволяющая увидеть, как выглядит ваше приложение в темном режиме. Вы можете предварительно просмотреть темный режим, нажав Shift + Command + A или перейдя на вкладку Features и нажав Toggle Appearance :

Симулятор местоположения GPS

Вы можете имитировать местоположение GPS с помощью симулятора. По умолчанию,

Вы можете использовать схемы для создания различных сборок вашего приложения. Это позволит вам тестировать приложение в разных средах. Например, вы можете создать сборку только для тестовой сборки, сборки staging, сборки development и сборки production.

Больше отличных статей от LogRocket:

Не упустите момент с The Replay, информационным бюллетенем от LogRocket о том, как LogRocket’s Galileo прорезает шум для проактивного решения проблем в вашем приложении.

Используйте UseEffect в React для оптимизации производительности вашего приложения

Переключение между несколькими версиями Node вашего приложения React с помощью AnimXYZ , нового фреймворка для создания двоичных файлов

• Сравнение NestJS и Express.js
• Допустим, нам нужно создать три различные сборки: сборку для тестирования или staging, сборку для разработки и сборку для производства. Каждая сборка будет иметь уникальный идентификатор сборки и собственное имя.
• Чтобы увидеть, как это работает, давайте создадим схемы: staging, production, development.
• Перейдите в Product → Manage Scheme :

Нажмите на +, чтобы создать новую схему:

Сделайте то же самое с Production и Staging. Убедитесь, что сняли галочку со схемы по умолчанию:

Отметьте все три сборки, которые вы только что создали:

Следующим шагом будет установка определенных параметров сборки для каждой схемы. Перейдите в Product → Scheme → Edit Scheme :

Вы можете выбрать тип конфигурации сборки, которую вы хотите использовать при запуске приложения, среди многих других опций:

Работа с файлом info.plist

info.plist – это XML-файл, который используется для хранения списка свойств приложения, таких как AppName , версия, описание разрешений, настройки и т.д.

Когда создается проект в Xcode, он по умолчанию поставляется с файлом info.plist. Вы можете иметь несколько файлов plist в одном рабочем пространстве. Вы можете создать несколько файлов plist для различных сред – например, Staging.plist, Production.plist, Development.plist. Одновременно можно использовать только один файл.

Учитывая, что мы создали файл для Staging ( Staging.plist ), щелкните правой кнопкой мыши на директории проекта и выберите New File :

Выберите файл Property Lis и дайте ему имя, например Staging .

Лучше всего скопировать значения из файла info.plist, а затем внести в него изменения, чтобы избежать проблем с синтаксисом. Откройте файл как исходный код, затем скопируйте и вставьте.

Давайте изменим имя приложения displayName в файле Staging.plist:

Теперь нам нужно, чтобы Xcode использовал Staging.plist вместо info.plist при сборке.

Сначала нам нужно создать конфигурацию сборки и связать с ней файл staging. Нажмите на значок проекта, затем найдите Конфигурации на вкладке Информация . Просто продублируйте конфигурацию Debug или Release, создайте новую конфигурацию и назовите ее Staging:

После создания конфигурации сборки staging следующим шагом будет указать Xcode, какой файл списка свойств он должен использовать при использовании определенной сборки. В нашем случае мы хотим, чтобы он использовал Staging, поэтому нам нужно добавить путь к Staging.plist.

Перейдите в настройки сборки, найдите вкладку Packaging и нажмите на файл info.plist. Он расширится, и появятся три конфигурации сборки – Debug, Release и Staging. Добавьте путь к Staging, который является AppN

Нажмите кнопку + и найдите Описание использования приватной камеры :

Затем добавьте описание значения использования справа:

Резюме

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

LogRocket: Мгновенное воссоздание проблем в ваших приложениях React Native.

LogRocket – это решение для мониторинга React Native, которое помогает мгновенно воспроизводить проблемы, определять приоритеты ошибок и понимать производительность приложений React Native.

LogRocket также помогает повысить конверсию и использование продукта, показывая, как именно пользователи взаимодействуют с вашим приложением. Функции анализа продуктов LogRocket позволяют выявить причины, по которым пользователи не завершают определенный процесс или не используют новую функцию.

Начните проактивно отслеживать свои приложения React Native – попробуйте LogRocket бесплатно.

React Native Xcode Tutorial

Запуск сборки React Native Список требований к реальным устройствам

Список целевых устройств Xcode, подключенных к iPhone

React Native Cli Terminal Start Server

Успешная сборка Автоматический запуск приложения Устройство