Как создать собственный модуль React Native для iOS

Несколько недель назад я решил помочь @gastoon___ с рефакторингом и упаковкой созданной им реактивной библиотеки, реагировать-родной-twilio-видео-webrtc. Прежде чем приступить к работе с библиотекой, @gastoon___ и я работали над предыдущим проектом, который включал разработку кросс-платформенного приложения в React с использованием Реагировать на родной для мобильных приложений. Раньше у меня никогда не было возможности на самом деле пройти через процесс упаковки библиотеки React Native, включающей нативные компоненты, так что это был хороший вызов.

Я собираюсь объяснить два разных «метода» того, как подходить к распространению и установке кода. Я предполагаю, что вы знакомы с основами разработки iOS и cocoapods в качестве менеджера пакетов.

Структура библиотеки

Для реактивного пакета вы, вероятно, будете структурировать свой код в трех разных папках: src/lib (файлы js), ios и android. Мы сосредоточимся только на двух первых папках.

В нашей папке src будут файлы javascript, это код, который потребуется реактивному приложению, использующему библиотеку. Затем у нас есть папка ios, в которой будут храниться наши файлы target-c/swift. Важно понимать, что наш пакет node будет содержать наш код js и собственный код. Это очень удобно для пользователей, так как им не нужно загружать код с помощью другого инструмента, у них есть весь необходимый код для запуска библиотеки внутри node_modules/mylib папка.

Давайте теперь посмотрим на различные способы установки собственной библиотеки в клиентское приложение.

Руководство

Если вы создаете библиотеку без внешних зависимостей на нативной стороне помимо iOS Frameworks, ручной способ, вероятно, достаточно хорош. Этот процесс установки позволит пользователю установить библиотеку, просто выполнив react-native link your-library после того, как они установили пакет узла. Недостатком IMO ручной установки является то, что если у вас есть внешняя зависимость, пользователю будет сложно добавить ее, поскольку установка должна включать новые шаги, которые люди, не привыкшие к разработке iOS, могут сбить с толку.

Что нам нужно сделать, чтобы включить ссылку, так это создать xcodeproj для нашей собственной библиотеки в ios папка. Мы делаем это, переходя в Xcode и создавая новый Cocoa Touch Static library проект. После того, как мы создали наш проект, нам нужно добавить только те файлы, которые относятся к родной библиотеке ios.

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

npm install --save your-library
react-native link your-library

Какаподы

Если нативная библиотека зависит от других библиотек obj-c/swift, рекомендуется предоставить файл podspec с описанием библиотеки и ее зависимостей. Это подспек для react-native-twilio-video-webrtc проект.

require 'json'

package = JSON.parse(File.read(File.join( __dir__ , 'package.json')))

Pod::Spec.new do |s|
  s.name="react-native-twilio-video-webrtc"
  s.version = package['version']
  s.summary = package['description']
  s.description = package['description']
  s.license = package['license']
  s.author = package['author']
  s.homepage = package['homepage']
  s.source = { git: ' tag: s.version }

  s.requires_arc = true
  s.platform = :ios, '8.0'

  s.preserve_paths="LICENSE", 'README.md', 'package.json', 'index.js'
  s.source_files="ios/*.{h,m}"

  s.dependency 'React'
  s.dependency 'TwilioVideo', '>= 1.0.1'
end

Как видите, мы указываем исходные файлы нативного кода ('ios/*.{h,m}') и какие внешние зависимости требуются во время выполнения, в данном случае React а также TwilioVideo.

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

Здесь вы можете увидеть подфайл примера приложения (Example/ios/Podfile)[внутри[insidereact-native-twilio-video-webrtc.

# Uncomment the next line to define a global platform for your project
source '

platform :ios, '9.0'

target 'Example' do
  pod 'Yoga', path: '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
  pod 'React', path: '../node_modules/react-native'
  pod 'react-native-twilio-video-webrtc', path: '../../'
end

Здесь следует отметить две важные вещи. Мы уточняем React а также Yoga (требуется для реакции) как локальные (файловая система) зависимости. Это сделано таким образом, поскольку react-native начал поставлять нативный код в пакете node. Во-вторых, мы делаем то же самое для нашей собственной библиотеки (помните, мы говорили, что наш собственный код и код js будут поставляться внутри нашего пакета node?). В данном случае мы не указываем на папки node_modules, потому что в проекте уже есть файлы.

Теперь, когда у нас все настроено, мы можем установить наш код:

npm install --save your-library
cd ios
pod install

Не забудьте начать использовать xcodeworkspace, созданный Cocopods, вместо использования xcodeproj. Если вы не знакомы с этим, пожалуйста, обратитесь к документации Cocopods.

Карфаген?

Вероятно, это другие способы установки нативных зависимостей с помощью Carthage (никогда не используйте его в родной iOS-разработке). Если кто-то пробовал это раньше, пожалуйста, дайте мне знать!

Вывод

Я надеюсь, что это может быть полезно для тех, кто пытается упаковать нативную библиотеку, использующую нативный код ios. Любые предложения или различные способы решения проблемы, пожалуйста, дайте мне знать!

Наслаждайтесь 🎉

Похожие записи

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

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