在 React Native 0.74 新架构下，iOS 开发人员需要从传统的 RCTBridgeModule 迁移到 TurboModules 和 JSI 通信方式。下面是详细的步骤，指导 iOS 开发人员如何在新架构下实现与 React Native 通信。每一步都尽可能详细，以便 iOS 开发人员无需了解太多 React Native 的细节也能完成迁移。
1. 概览
在旧版本中，iOS 和 React Native 之间的通信是通过 RCTBridgeModule 实现的。这种方式是异步的，使用了 React Native 的桥接机制。现在，在新架构中，通信主要通过 TurboModules 和 JSI 实现，它们提供了更高效的通信方式。
2. 初步准备
2.1 确保项目使用 React Native 0.74 版本
首先，你需要确保你的项目已经升级到 React Native 0.74 版本。如果你的项目还没有升级，建议与负责 React Native 升级的团队配合，完成 React Native 的升级。
2.2 启用新架构
在新架构中，TurboModules 和 Fabric 是核心组成部分。你需要确保新架构已在项目中启用。
步骤：
-
更新
Podfile：
打开项目的ios/Podfile文件，确保包含以下配置：use_react_native!( :path => config[:reactNativePath], :fabric_enabled => true, :new_architecture_enabled => true ) -
安装 CocoaPods 依赖：
在ios目录中，运行以下命令来安装依赖：cd ios pod install -
构建项目：
确保项目可以正常构建并运行：cd .. yarn ios
3. 编写 TurboModule
TurboModule 是替代 RCTBridgeModule 的新方式，用于在新架构中实现原生模块与 JavaScript 的通信。
3.1 定义 TurboModule 的接口
TurboModule 的接口定义需要通过 TypeScript 或 Flow 来完成。虽然这部分工作通常由 React Native 开发人员完成，但理解这一步有助于了解后续步骤。
// MyModuleSpec.ts
import { TurboModule, TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
openRouter(router: string, parameters: { [key: string]: any }): void;
showHUD(): void;
}
export default TurboModuleRegistry.get<Spec>('MyModule');
3.2 生成代码（由 RN 开发人员完成）
React Native 开发人员会使用 Codegen 工具生成相应的 Objective-C 或 C++ 代码，这些代码会被集成到 iOS 项目中。
4. 编写 iOS 原生代码
这是 iOS 开发人员的主要任务。你需要根据生成的接口实现 TurboModule 的原生逻辑。
4.1 创建 Objective-C++ 文件
在 ios 目录中，创建一个新的文件夹（例如 MyModule），用于存放 TurboModule 的实现文件。
4.2 实现 TurboModule 的逻辑
创建一个 MyModule.mm 文件，并实现 TurboModule 的逻辑。
// MyModule.mm
#import <React/RCTLog.h>
#import <React/RCTViewManager.h>
#import <React/RCTBridgeModule.h>
#import <ReactCommon/RCTTurboModule.h>
@interface MyModule : NSObject <RCTTurboModule>
@end
@implementation MyModule
RCT_EXPORT_MODULE()
- (void)openRouter:(NSString *)router parameters:(NSDictionary *)parameters
{
dispatch_async(dispatch_get_main_queue(), ^{
[[SGRouterManager sharedInstance] openURL:router parameters:parameters];
});
}
- (void)showHUD
{
dispatch_async(dispatch_get_main_queue(), ^{
[SVProgressHUD show];
});
}
@end
-
RCT_EXPORT_MODULE()：用于导出模块，使其在 JavaScript 中可用。 -
RCTTurboModule：这是 TurboModule 的核心协议，取代了RCTBridgeModule。
4.3 实现与 JSI 的集成
为了提高通信效率，你可以选择实现 JSI 与原生代码的直接集成。这涉及使用 C++ 实现部分代码。
创建一个 MyModule.cpp 文件：
#include <jsi/jsi.h>
#include <ReactCommon/TurboModuleUtils.h>
#include "MyModuleSpec.h"
using namespace facebook::jsi;
using namespace facebook::react;
class MyModule : public TurboModule {
public:
MyModule(std::shared_ptr<CallInvoker> jsInvoker)
: TurboModule("MyModule", jsInvoker) {}
void openRouter(Runtime& rt, const std::string& router, const Object& parameters) {
// 原生逻辑
dispatch_async(dispatch_get_main_queue(), ^{
[[SGRouterManager sharedInstance] openURL:[NSString stringWithUTF8String:router.c_str()] parameters:RCTConvert<NSDictionary *>(parameters)];
});
}
void showHUD(Runtime& rt) {
// 原生逻辑
dispatch_async(dispatch_get_main_queue(), ^{
[SVProgressHUD show];
});
}
};
这段代码展示了如何使用 C++ 通过 JSI 直接与 JavaScript 通信，而不再依赖传统的桥接方式。
5. 集成与调试
5.1 将模块集成到项目中
确保你将所有实现的代码集成到 Xcode 项目中，并确保它们在项目的编译设置中是正确的。
5.2 测试 TurboModule
- 在 Xcode 中运行项目，确保模块能够被正确调用，并且通信是有效的。
- 如果遇到问题，检查 Xcode 控制台日志，调试原生代码与 JavaScript 代码之间的交互。
6. 总结与最佳实践
- 新架构的优势：通过迁移到 TurboModule 和 JSI，你可以享受更高效的通信和更好的性能，这在高频交互场景中尤为重要。
-
渐进式迁移：可以逐步将旧的
RCTBridgeModule迁移到 TurboModule，确保每个模块的稳定性。 - 与 RN 团队协作：在迁移过程中，与负责 React Native 部分的开发团队紧密合作，确保接口定义与原生实现的一致性。
