RN Turbo新架构下JSI通信

在 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 部分的开发团队紧密合作，确保接口定义与原生实现的一致性。