Получите ранний доступ к TurboModules и Codegen в React-Native
Введение
В прошлой статье мы реализовали и включили Турбомодули в Android. Если вы еще не закончили этот блог, вам нужно вернуться и закончить его, прежде чем начинать этот. Предыдущая статья содержит дополнительные инструкции, которые необходимо выполнить в коде TypeScript. В этой статье речь пойдет о том, как все настроить и запустить в iOS. Как обычно, если вы когда-нибудь застряли, вы можете проверить репозиторий GitHub здесь. Если вы предпочитаете визуальное обучение, вы можете посмотреть мой учебник на YouTube на эту тему. Чтобы немного резюмировать последний пост, мы создаем следующее приложение, которое может вызывать уровень Native с помощью TurboModule и печатать сообщение.
Обновление нашего package.json
iOS требует дополнительного шага на стороне React, чтобы все заработало. iOS не имеет такой же возможности, как gradle, для поиска папок, поэтому нам нужно указать путь к файлу Spec в файле package.json. Вы можете сделать это, добавив следующий код в конец файла:
"codegenConfig": {
"libraries": [{
"name": "NativeSampleModule",
"type": "modules",
"jsSrcsDir": "./js"
}]
}
Включение Codegen на iOS
Далее нам нужно включить новую архитектуру на iOS. Вы можете сделать это, открыв папку ios в Xcode, а затем перейдя в Настройки сборки. Найдите раздел Другие флаги C++ в разделе Apple Clang — Пользовательские флаги компилятора и добавьте -DRCT_NEW_ARCH_ENABLED=1.
Теперь нам нужно запустить специальную команду pod install, чтобы все работало с новой архитектурой:
RCT_NEW_ARCH_ENABLED=1 pod install
Вы должны увидеть кучу новых архитектурных библиотек.
Подключение Objective-C к React-Native
Теперь, когда все включено, мы можем перейти к написанию нашего собственного кода. Начнем с добавления файла Podspec в папку js. Мы делаем это, потому что Cocoapods используются для управления экосистемой TurboModule, а iOS должна знать, что вы устанавливаете модуль. Назовите файл NativeSampleModule.podspec и скопируйте и вставьте следующее содержимое:
folly_version = '2021.06.28.00-v2'
folly_compiler_flags = "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-shorten-64-to-32"
Pod::Spec.new do |s|
s.name = "NativeSampleModule"
s.version = "0.0.1"
s.summary = "NativeSampleModule"
s.description = "NativeSampleModule"
s.homepage = ""
s.license = "MIT"
s.platforms = { :ios => "11.0"}
s.author = ""
s.source = { :git => "https://github.com/facebook/react-native.git", :tag => "#{s.version}"}
s.source_files = "./**/*.{h,m,mm,swift}"
s.compiler_flags = folly_compiler_flags
s.pod_target_xcconfig = {
"HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\""
}
s.dependancy "React"
s.dependancy "React-RCTFabric"
s.dependancy "React-Codegen"
s.dependancy "RCT-Folly", folly_version
s.dependancy "RCTRequired"
s.dependancy "RCTTypeSafety"
s.dependancy "ReactCommon/turbomodule/core"
end
Теперь, если мы снова запустим RCT_NEW_ARCH_ENABLED=1 pod install, мы сможем сгенерировать привязки для Objective-C. Если вы видите что-то подобное, это означает, что Codegen удалось:
[Codegen] >>>>> Processing NativeSampleModule [Codegen] Generated schema: /var/folders/70/796_sfnj3xn48tzsx0tzz4g80000gn/T/NativeSampleModuleJbRobp/schema.json [Codegen] Generated artifacts: TurboModuleSampleProject/ios/build/generated/ios/NativeSampleModule
Вернувшись в Xcode, щелкните проект правой кнопкой мыши и выберите Добавить файлы в TurboModuleExampleProject:
Затем найдите ios › build › сгенерированный › ios › NativeSampleModule. Убедитесь, что установлен флажок «Создать группы», и нажмите «Добавить»:
На этом этапе вы должны увидеть пакет NativeSampleModule в вашем TurboModuleSampleProject:
Теперь создайте файл заголовка и файл Objective-C++ с именем RCTNativeSampleModule. В заголовочный файл вам нужно добавить следующий код:
#ifndef RCTNativeSampleModule_h #define RCTNativeSampleModule_h #include "NativeSampleModule.h" @interface NativeSampleModule : NSObject<NativeSampleModuleSpec> @end #endif /* RCTNativeSampleModule_h */
Наконец, давайте закончим, создав методы в файле Objective-C++. Содержимое RCTNativeSampleModule.mm должно быть следующим:
#import <Foundation/Foundation.h>
#include "RCTNativeSampleModule.h"
@implementation NativeSampleModule
RCT_EXPORT_MODULE()
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
return std::make_shared<facebook::react::NativeSampleModuleSpecJSI>(params);
}
- (NSString *)getHelloWorld:(NSString *)first second:(NSString *)second {
return [NSString stringWithFormat:@"HelloWorld %@ %@", first, second];
}
@end
Теперь, если вы скомпилируете с yarn ios, мы сможем нажать кнопку и увидеть предупреждающее сообщение.
Заключение
Вот ваше введение в TurboModules в React-Native. Я рад, что архитектура будет продвигаться вперед с этими лучшими инструментами для вызова нативного кода. До следующего раза, удачного взлома!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
