Документация о том, как это сделать на сайте React Native, устарела.

Первоначально опубликовано на https://fek.io.

Я начал использовать React Native в существующих приложениях для iOS и Android, которые я поддерживаю. Одна из проблем, которую я обнаружил в документах React Native, заключается в том, что руководства по добавлению в существующее iOS-приложение устарели.

Какаподы

React Native использует Cocoapods для добавления зависимостей iOS при добавлении новых модулей в приложение. Cocoapods — это менеджер зависимостей для экосистемы разработки Apple. С момента появления Cocoapods Apple добавила свой собственный диспетчер пакетов Swift, но React Native был создан до его появления. Cocoapods — единственный способ добавить React Native и его нативные модули в проекты iOS.

Cocoapods использует файл конфигурации с именем Podfile, чтобы указать менеджеру зависимостей Cocoapods, какие модули добавить в ваш проект Xcode. Для этого создается файл рабочей области, а затем добавляется проект и все необходимые модули в рабочую область.

Podfile, указанный в руководствах по добавлению React Native в существующий проект iOS, не будет работать! Я повторяю это. Их Podfile не будет работать в существующем проекте iOS. У них есть примеры как для Objective-C, так и для Swift, и ни один из них не соответствует текущей версии React Native.

Как добавить React Native с 2022 года

В этом посте я предполагаю, что у вас уже установлен Xcode. Вам также потребуется настроить среду для быстрого запуска React Native CLI в руководстве по настройке среды. Программа установки убедится, что у вас установлена ​​текущая версия Homebrew, Node.js, а также watchman и Cocoapods. У меня есть еще одна статья, которую я недавно создал, о том, как получить настройку React Native и запустить ее на Mac на базе M1.

Настроить структуру каталогов

Создайте новую папку для вашего проекта. Здесь мы будем хранить код React Native. После создания этой папки скопируйте существующий проект iOS в папку под папкой вашего проекта с именем ios.

Установить зависимости узла

В корне папки вашего проекта создайте файл package.json со следующим содержимым:

{
  "name": "YourReactNativeApp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

Убедитесь, что у вас установлен менеджер пакетов yarn. Если у вас это не установлено, вы можете установить его с помощью следующей команды:

> npm install yarn -g

Чтобы установить зависимости Node, вы можете использовать следующую команду:

> yarn add react-native

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

| › [email protected] имеет неудовлетворенную зависимость от однорангового узла «react@17.0.2».

Если ваша неудовлетворенная зависимость является определенной версией реакции, вам нужно будет добавить React для конкретной версии, указанной в сообщении:

Настройка Cocoapods для вашего приложения iOS

Теперь, когда у вас установлены React и React Native, перейдите в подкаталог ios и выполните следующую команду:

> pod init

Эта команда создаст Podfile, файл конфигурации, который Cocoapods использует для добавления зависимостей в ваше приложение iOS. Podfile должно выглядеть примерно так:

У каждого проекта Xcode должна быть цель. Цель является целью для компиляции. Обычно, если у вас есть несколько поддерживаемых платформ, например MacOS, tvOS и iOS, у вас будет цель для каждой платформы. В этом примере мы изменим цель только для нашего приложения iOS. В приведенном выше примере моя цель для iOS называется yourreactnativeapp.

После того, как вы изменили свой подфайл, включив в него функцию use_react_native! для вашей цели, теперь вы запускаете следующую команду, чтобы добавить свои зависимости React Native:

> pod install

После того, как вы установили свои зависимости с помощью команды pod install, Cocoapods создаст рабочее пространство (yourreactnativeapp.xcworkspace) для вашего проекта. Он должен иметь то же имя, что и файл проекта. С этого момента вы захотите использовать файл рабочей области для открытия вашего проекта в Xcode.

В вашем новом рабочем пространстве будет два проекта: один с вашим приложением для iOS и один под названием Pods. Проект Pods будет содержать все зависимости, которые вам понадобятся для запуска React Native в вашем приложении.

Добавление React View в ваше приложение для iOS

Теперь, когда мы добавили зависимости React Native в ваше приложение для iOS, у нас есть зависимости, необходимые для запуска содержимого React Native в вашем приложении. Давайте продолжим и изменим ViewController для отображения нашего приложения React Native:

Теперь давайте изменим файл index.js, чтобы он выглядел следующим образом:

Чтобы проверить и убедиться, что это настроено правильно, мы сначала запустим Metro, выполнив следующую команду в корне нашего проекта:

> yarn start

Как только мы запустили Metro, мы можем снова запустить наше приложение для iOS и перейти к ViewController, содержащему наше представление RCTRootView. Это должно создать экран, который выглядит следующим образом:

Заключение

Я надеюсь, что это объясняет, как вы можете добавить React Native в существующее приложение iOS. React Native — один из многих инструментов, доступных iOS-разработчикам для создания нативных приложений. Одна из приятных особенностей React Native заключается в том, что он кроссплатформенный. Это упрощает обмен кодом между приложениями iOS и Android.



Как настроить React Native на M1 Mac версии 2022
Документация для React Native не содержит сведений о M1 Apple Silicondavidfekke.medium.com