解析 `React Native New Architecture`：如何通过 Codegen 保证 JS 层与 C++ 层的类型安全性？

解析 React Native New Architecture：Codegen 如何保证 JS 层与 C++ 层的类型安全性

React Native 自诞生以来，极大地革新了移动应用开发。它允许开发者使用 JavaScript/TypeScript 构建跨平台的原生应用，显著提高了开发效率。然而，其早期的架构（基于“Bridge”的消息队列机制）在性能、调试体验和类型安全性方面存在一些固有的局限性。为了克服这些挑战，React Native 引入了全新的架构，其核心支柱包括 JSI (JavaScript Interface)、TurboModules、Fabric 和 Codegen。

本文将深入探讨 React Native New Architecture 中一个至关重要的组成部分：Codegen。我们将围绕其如何通过自动化代码生成，确保 JavaScript/TypeScript 应用层与底层 C++ 原生模块之间实现严格的类型安全性，并提升整体开发体验和运行时性能。

1. 旧架构的局限与新架构的诞生

在深入 Codegen 之前，我们首先回顾一下 React Native 旧架构的核心问题，这有助于理解新架构诞生的必然性及其解决的问题。

1.1 旧架构（Bridge）的挑战

旧架构的核心是“Bridge”——一个基于 JSON 序列化/反序列化和异步消息传递机制的通道。JavaScript 线程和原生 UI 线程通过这个 Bridge 交换数据和指令。

1. 性能瓶颈：序列化与反序列化
   每次 JS 调用原生方法或原生事件回传 JS 时，参数和返回值都需要被序列化为 JSON 字符串，跨越 Bridge 传输，然后再反序列化。这一过程涉及大量的字符串操作和内存分配，带来了显著的性能开销，尤其是在数据量大或调用频繁的场景下。

2. 异步通信的复杂性
   Bridge 默认是异步的。虽然这避免了阻塞 UI 线程，但也增加了 JS 和原生代码之间交互的复杂性。对于需要立即获取结果的场景（如测量布局、同步状态），旧架构显得力不从心，有时甚至需要引入变通方案。

3. 类型安全性缺失
   JSON 传输本身不携带类型信息。在旧架构中，JavaScript 传递给原生模块的参数在原生侧需要手动进行类型检查和转换。这意味着类型不匹配的错误只能在运行时被发现，导致应用崩溃或不可预测的行为。例如，JS 传递一个字符串，但原生模块期望一个数字，这在编译时是无法捕获的。

4. 模块注册与生命周期的不透明
   原生模块的注册和发现机制相对松散，通常依赖于运行时反射，缺乏统一的、类型安全的接口定义。

1.2 新架构的核心理念

新架构旨在解决这些痛点，其核心理念可以概括为：

• 直接交互 (JSI)： 移除 Bridge 的序列化/反序列化开销，实现 JavaScript 引擎与 C++ 代码的直接同步通信。
• 统一类型合同 (Codegen)： 通过自动化工具生成 JS 和原生代码之间的类型安全接口，确保两端严格遵守同一份 API 契约。
• 强类型原生模块 (TurboModules)： 作为原生模块的新范式，利用 JSI 和 Codegen 实现高性能、类型安全的模块。
• 原生 UI 管理 (Fabric)： 用于替代旧的 UI 管理器，通过 JSI 实现更高效、更具响应性的原生 UI 渲染。

本文将聚焦于 Codegen 在 TurboModules 中的应用，以及它如何实现 JS 与 C++ 之间的类型安全性。

2. JSI：类型安全的基石

在讨论 Codegen 之前，理解 JSI (JavaScript Interface) 的作用至关重要。JSI 是新架构的底层核心，它为 JavaScript 引擎提供了一个轻量级的 C++ 接口。

2.1 JSI 的工作原理

与旧架构通过 Bridge 进行异步 JSON 消息传递不同，JSI 允许 C++ 代码直接访问 JavaScript 运行时环境。这意味着：

• 直接内存访问： C++ 代码可以直接操作 JS 引擎中的 JavaScript 值（如 jsi::Value, jsi::Object, jsi::Array），而无需进行序列化和反序列化。
• 同步调用： C++ 方法可以直接从 JavaScript 线程同步调用，并立即返回结果。这对于需要低延迟或同步结果的场景（如测量布局、访问设备属性）至关重要。
• 宿主对象 (Host Objects) 和宿主函数 (Host Functions)： JSI 允许 C++ 创建“宿主对象”和“宿主函数”，并将它们直接注入到 JavaScript 全局对象中。JavaScript 代码可以直接像调用普通 JS 对象和函数一样调用这些 C++ 对象和函数。

2.2 JSI 与类型安全性

JSI 本身提供的是一种低级别的 C++ API，用于操作 JS 运行时中的值。它提供了 jsi::Value、jsi::String、jsi::Number、jsi::Object、jsi::Array 等类型，但这些类型在 C++ 层面仍然是动态的。开发者需要手动在 C++ 中进行类型检查（例如 value.isNumber()）和类型转换（例如 value.asNumber()）。

虽然 JSI 消除了序列化开销，但它并没有直接提供 JS 和 C++ 之间高级别的类型安全保证。这时，Codegen 便应运而生。

3. TurboModules：拥抱类型安全的原生模块

TurboModules 是 React Native 新架构中替代传统 Native Modules 的方案。它们与 JSI 紧密结合，并依赖 Codegen 来实现其核心优势：类型安全和高性能。

3.1 TurboModules 的核心特点

• 懒加载 (Lazy Loading)： TurboModules 可以在需要时才被加载和初始化，而不是在应用启动时全部加载，从而缩短启动时间。
• 类型安全： 这是最关键的特点，由 Codegen 保证。JS 和原生代码之间的 API 契约在编译时就已确定并强制执行。
• 高性能： 利用 JSI 的同步调用和直接内存访问能力，消除了 Bridge 的序列化/反序列化开销。
• 跨平台一致性： 统一的 TypeScript 接口定义确保了原生模块在 iOS 和 Android 平台上的行为一致性。

3.2 TurboModules 与 Codegen 的关系

Codegen 是 TurboModules 类型安全的核心。开发者不再需要手动编写 iOS (Objective-C/Swift) 和 Android (Java/Kotlin) 两套原生接口，而是只需要用 TypeScript 定义一个统一的接口规范。Codegen 会根据这个 TypeScript 规范，自动生成 C++ 接口代码、平台特定的原生包装代码（Objective-C 和 Java），以及 JavaScript 运行时可以使用的存根代码。

这个自动生成的过程，确保了 JS 层和 C++ 实现层之间存在一个明确的、类型化的“合同”。如果 C++ 实现不符合这个合同，C++ 编译器会在编译时报错，而不是等到运行时才发现类型不匹配的问题。

4. Codegen：类型安全的守护者

Codegen (Code Generator) 是 React Native New Architecture 中的一个构建时工具。它的核心职责是根据开发者提供的 TypeScript 接口定义，自动生成跨越 JavaScript 和原生代码边界所需的各种“胶水代码”。

4.1 Codegen 的作用机制

1. 输入：TypeScript 接口定义 (Spec File)
   开发者使用特定的 TypeScript 语法来定义原生模块的 API 接口，包括方法名称、参数类型、返回值类型等。这是 Codegen 的唯一输入源，也是整个类型安全链条的起点。

2. 处理：构建时解析与生成
   在项目构建过程中，react-native-codegen 工具会被调用。它会解析 TypeScript Spec 文件，理解其中定义的类型和结构。

3. 输出：多语言代码生成
   Codegen 会根据解析结果，生成多种语言的接口文件和支持代码：

   • C++ 头文件： 定义了原生模块的 C++ 抽象基类或接口，其中包含了 TypeScript Spec 中定义的方法签名。这是 JS 和原生实现之间的核心类型契约。
   • 平台特定包装器： 例如，Objective-C/Swift 的 @protocol 定义和 Java/Kotlin 的 interface 定义，这些是原生平台用于实现 C++ 接口的包装层。
   • JavaScript/TypeScript 运行时存根： 用于在 JS 侧调用原生模块的代理对象，它知道如何通过 JSI 找到并调用 C++ 模块。

4.2 Codegen 如何保证类型安全性

Codegen 的核心价值在于它将类型检查从运行时前置到了编译时。

1. 单一事实来源 (Single Source of Truth)： TypeScript Spec 文件成为 JS 和原生代码之间 API 的唯一、权威的定义。任何一方想要交互，都必须遵守这个 Spec。

2. 强制性的接口实现：

   • 在 C++ 侧： Codegen 生成的 C++ 头文件定义了一个纯虚函数接口。原生模块的 C++ 实现必须继承这个接口，并实现所有方法，且方法签名必须与生成的接口完全匹配。如果签名不匹配（例如，参数类型错误、参数数量不对、返回值类型不符），C++ 编译器将在构建时报错。
   • 在 JS 侧： Codegen 生成的 JS 存根也严格遵循 TypeScript Spec。当开发者在 JS 代码中调用模块方法时，TypeScript 编译器会检查传入的参数是否符合 Spec 定义的类型。

3. 自动化消除人为错误： 过去手动编写多套接口文件（JS、Objective-C、Java）时，很容易出现类型不一致、参数顺序错误、方法名拼写错误等问题。Codegen 完全自动化了这一过程，确保了生成代码的准确性和一致性，从而消除了大量潜在的运行时错误。

4. 清晰的类型转换约定： Codegen 会根据 TypeScript 类型，在生成的 C++ 接口中映射到相应的 JSI 类型（如 jsi::Value、jsi::String、jsi::Number、jsi::Object、jsi::Array）或 C++ 原生类型（如 double、std::string）。这为原生开发者在 C++ 实现中进行显式类型转换提供了明确的指导。

5. Codegen 工作流详解：以 TurboModule 为例

让我们通过一个具体的例子来详细解析 Codegen 如何工作，以及它如何确保类型安全。

假设我们要创建一个名为 MyCustomModule 的 TurboModule，它提供以下功能：

• 获取一个常量字符串。
• 将两个数字相乘，并返回一个 Promise。
• 添加两个数字，无返回值。
• 处理一个包含 id 和 value 的对象，并返回一个包含 status 的对象。
• 处理一个字符串数组，并返回一个转换后的字符串数组。

5.1 Step 1: 定义 TypeScript Spec 文件

首先，我们在 React Native 项目的 src/modules 目录下创建一个 TypeScript Spec 文件，例如 NativeMyCustomModule.ts。这个文件是 Codegen 的输入：

// NativeMyCustomModule.ts
import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
import { TurboModuleRegistry } from 'react-native';

/**
 * 定义 MyCustomModule 的原生模块接口。
 * 所有的 TurboModule 接口都必须继承 TurboModule。
 */
export interface Spec extends TurboModule {
  /**
   * 获取一个常量字符串。
   * 返回类型为 string。
   */
  readonly getConstantString: () => string;

  /**
   * 将两个数字相乘。
   * 参数 a 和 b 都是 number 类型。
   * 返回一个 Promise，其解析值为 number 类型。
   */
  readonly multiply: (a: number, b: number) => Promise<number>;

  /**
   * 添加两个数字。
   * 参数 a 和 b 都是 number 类型。
   * 没有返回值 (void)。
   */
  readonly addValues: (a: number, b: number) => void;

  /**
   * 处理一个复杂对象。
   * 参数 data 是一个包含 id (string) 和 value (number) 的对象。
   * 返回一个包含 status (string) 的对象。
   */
  readonly processObject: (data: {id: string, value: number}) => {status: string};

  /**
   * 处理一个字符串数组。
   * 参数 items 是一个 string 数组。
   * 返回一个 string 数组。
   */
  readonly processArray: (items: string[]) => string[];
}

/**
 * 通过 TurboModuleRegistry 获取 MyCustomModule 的实例。
 * 'NativeMyCustomModule' 是模块在原生端注册的名称。
 */
export default TurboModuleRegistry.get<Spec>('NativeMyCustomModule');

关键点：

• import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';：这是 Codegen 识别 TurboModule Spec 的关键。
• export interface Spec extends TurboModule { ... }：定义了模块的公共 API。
• readonly 关键字：表示这些是只读的方法（由原生实现提供）。
• 类型注解：所有参数和返回类型都必须明确指定，Codegen 会据此生成类型安全的接口。支持基本类型、对象、数组、Promise 等。

5.2 Step 2: Codegen 执行与代码生成

在 React Native 项目的构建过程中（例如，运行 npx react-native run-ios 或 npx react-native run-android），react-native-codegen 包会被自动触发。它会扫描项目中的 TypeScript Spec 文件，并根据这些文件生成相应的原生代码。

生成的代码通常位于 node_modules/react-native/codegen/ 或项目的 build/generated/source/codegen/ 目录下（具体路径可能因 React Native 版本和平台而异）。

下面是 Codegen 可能生成的关键文件和内容示例：

示例 2.1: 生成的 C++ 头文件 (NativeMyCustomModule.h)

这是最重要的类型契约文件。它定义了一个 C++ 抽象基类，你的原生 C++ 实现必须继承并实现它。

// Generated by Codegen for React Native
//
// Do not edit this file directly.
//
// @generated SignedSource<<...>>

#pragma once

#include <react/bridging/Bridging.h>
#include <react/bridging/JSIStore.h>
#include <react/bridging/NativeModule.h>

namespace facebook::react {

  // JSI_EXPORT_FUNCTOR 宏用于将 C++ 方法暴露给 JSI
  JSI_EXPORT_FUNCTOR(getConstantString)
  JSI_EXPORT_FUNCTOR(multiply)
  JSI_EXPORT_FUNCTOR(addValues)
  JSI_EXPORT_FUNCTOR(processObject)
  JSI_EXPORT_FUNCTOR(processArray)

  /**
   * @brief C++ 抽象基类，定义了 NativeMyCustomModule 的接口。
   * 你的原生 C++ 实现必须继承并实现此接口的所有纯虚函数。
   * 注意，大部分复杂类型在接口层面会使用 jsi::Value, jsi::Object, jsi::Array
   * 而不是直接的 C++ 类型，因为 JSI 层面操作的是 JS 值。
   * 具体转换将在 C++ 实现中完成。
   */
  struct JSI_EXPORT NativeMyCustomModuleSpec : public TurboModule {
    NativeMyCustomModuleSpec(std::shared_ptr<CallInvoker> jsInvoker);

    /**
     * @brief 对应 TS Spec 中的 `getConstantString: () => string;`
     * 返回一个 JSI String 对象。
     */
    virtual jsi::String getConstantString() = 0;

    /**
     * @brief 对应 TS Spec 中的 `multiply: (a: number, b: number) => Promise<number>;`
     * 注意参数 `a` 和 `b` 直接映射为 `double` 类型，因为 number 是 JS 和 C++ 之间直接可转换的。
     * 返回值 `jsi::Value` 代表 Promise 的句柄，具体的 Promise 解析/拒绝由 JSI 运行时处理。
     */
    virtual jsi::Value multiply(double a, double b) = 0;

    /**
     * @brief 对应 TS Spec 中的 `addValues: (a: number, b: number) => void;`
     * 没有返回值。
     */
    virtual void addValues(double a, double b) = 0;

    /**
     * @brief 对应 TS Spec 中的 `processObject: (data: {id: string, value: number}) => {status: string};`
     * 参数 `data` 映射为 `jsi::Object`，返回值也映射为 `jsi::Value` (代表一个对象)。
     * 在 C++ 实现中需要手动从 `jsi::Object` 中提取属性，并构建返回的 `jsi::Object`。
     */
    virtual jsi::Value processObject(jsi::Object data) = 0;

    /**
     * @brief 对应 TS Spec 中的 `processArray: (items: string[]) => string[];`
     * 参数 `items` 映射为 `jsi::Array`，返回值也映射为 `jsi::Value` (代表一个数组)。
     * 在 C++ 实现中需要手动从 `jsi::Array` 中提取元素，并构建返回的 `jsi::Array`。
     */
    virtual jsi::Value processArray(jsi::Array items) = 0;
  };

} // namespace facebook::react

关键点：

• virtual ... = 0;：定义了纯虚函数，强制 C++ 模块实现这些方法。
• 类型映射：
  • string (TS) -> jsi::String (C++ 返回值), std::string (C++ 内部处理)
  • number (TS) -> double (C++ 参数)
  • void (TS) -> void (C++ 返回值)
  • Promise<T> (TS) -> jsi::Value (C++ 返回值，JSI 运行时负责 Promise 包装和处理)
  • {id: string, value: number} (TS 对象) -> jsi::Object (C++ 参数)
  • string[] (TS 数组) -> jsi::Array (C++ 参数)
• 如果 C++ 实现的签名与此头文件不匹配，C++ 编译器会直接报错，从而在编译阶段捕获类型不一致问题。

示例 2.2: 生成的 JavaScript 存根 (NativeMyCustomModule.js)

这个文件允许 JavaScript 代码通过 JSI 调用原生模块。它通常会有一个 get 方法来获取原生模块的实例。

// Generated by Codegen for React Native
//
// Do not edit this file directly.
//
// @generated SignedSource<<...>>

import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
import { TurboModuleRegistry } from 'react-native';

interface Spec extends TurboModule {
  readonly getConstantString: () => string;
  readonly multiply: (a: number, b: number) => Promise<number>;
  readonly addValues: (a: number, b: number) => void;
  readonly processObject: (data: {id: string, value: number}) => {status: string};
  readonly processArray: (items: string[]) => string[];
}

const NativeMyCustomModule = TurboModuleRegistry.get<Spec>('NativeMyCustomModule');

export default NativeMyCustomModule;

关键点：

• 这个 JS 存根文件直接导入并使用了我们定义的 Spec 接口。
• TurboModuleRegistry.get<Spec>('NativeMyCustomModule') 会在运行时通过 JSI 查找并返回由 C++ 实现的原生模块实例。
• 当你在 JS 代码中调用 NativeMyCustomModule.multiply(10, 5) 时，TypeScript 编译器会检查 10 和 5 是否为 number 类型，从而在 JS 侧提供编译时类型安全。

5.3 Step 3: 实现 C++ 模块

现在，我们需要在 C++ 中实现 NativeMyCustomModuleSpec 接口。

示例 3.1: C++ 头文件 (MyCustomModule.h)

// MyCustomModule.h
#pragma once

#include "NativeMyCustomModule.h" // 导入 Codegen 生成的接口头文件
#include <memory>

namespace mycustommodule {

/**
 * @brief MyCustomModule 的 C++ 实现类。
 * 必须继承自 Codegen 生成的 NativeMyCustomModuleSpec。
 */
class MyCustomModule : public facebook::react::NativeMyCustomModuleSpec {
public:
    // 构造函数，需要 CallInvoker 用于 JS 回调等
    MyCustomModule(std::shared_ptr<facebook::react::CallInvoker> jsInvoker);

    // 实现 Codegen 生成的所有纯虚函数。
    // 如果这些方法的签名与 NativeMyCustomModuleSpec 中的定义不完全匹配，
    // C++ 编译器将报错。
    jsi::String getConstantString() override;
    jsi::Value multiply(double a, double b) override;
    void addValues(double a, double b) override;
    jsi::Value processObject(jsi::Object data) override;
    jsi::Value processArray(jsi::Array items) override;
};

} // namespace mycustommodule

示例 3.2: C++ 实现文件 (MyCustomModule.cpp)

// MyCustomModule.cpp
#include "MyCustomModule.h"
#include <react/bridging/CallbackWrapper.h> // 用于 Promise 和回调
#include <react/bridging/jsi_to_json.h> // 辅助调试或复杂类型转换
#include <iostream> // 用于打印到控制台
#include <algorithm> // 用于 std::transform

namespace mycustommodule {

MyCustomModule::MyCustomModule(std::shared_ptr<facebook::react::CallInvoker> jsInvoker)
    : NativeMyCustomModuleSpec(std::move(jsInvoker)) {
    // 构造函数体
    // this->rt 是 JSI Runtime 的引用，可以在方法中使用
}

jsi::String MyCustomModule::getConstantString() {
    // 直接返回一个 JSI String
    return jsi::String::createFromAscii(this->rt, "Hello from C++ MyCustomModule!");
}

jsi::Value MyCustomModule::multiply(double a, double b) {
    // 对于 Promise，需要创建一个 Promise 对象并适时 resolve 或 reject
    // 这里为了简化，我们假设 JSI 包装器会处理 Promise 的创建和返回
    // 实际生产环境中，你会创建一个 jsi::Promise 对象，并在异步操作完成后调用其 resolve/reject 方法。
    // 示例 Promise 结构 (简化):
    // auto promise = jsi::Promise(this->rt, this->jsInvoker_); // 获取 promise 句柄
    // // 异步操作...
    // promise.resolve(jsi::Value(this->rt, a * b));
    // return promise.get;

    // 简单起见，直接返回计算结果。JSI 运行时会将其包装成 Promise。
    return jsi::Value(this->rt, a * b);
}

void MyCustomModule::addValues(double a, double b) {
    // 无返回值，执行 C++ 逻辑
    std::cout << "C++: addValues called with " << a << " and " << b << ". Sum: " << (a + b) << std::endl;
    // 可以在这里触发 JS 事件或执行其他操作
}

jsi::Value MyCustomModule::processObject(jsi::Object data) {
    // 从 JSI Object 中提取属性
    // Codegen 保证了 data 确实是一个对象，且包含 'id' (string) 和 'value' (number)
    std::string id = data.getProperty(this->rt, "id").asString(this->rt).utf8(this->rt);
    double value = data.getProperty(this->rt, "value").asNumber();

    // 执行一些 C++ 业务逻辑
    std::string status = "processed";
    if (value < 0) {
        status = "invalid_value";
    } else if (id.empty()) {
        status = "missing_id";
    }

    // 创建一个 JSI Object 作为返回值
    jsi::Object result(this->rt);
    result.setProperty(this->rt, "status", jsi::String::createFromUtf8(this->rt, status.c_str()));
    return result;
}

jsi::Value MyCustomModule::processArray(jsi::Array items) {
    // 将 JSI Array 转换为 C++ std::vector<std::string>
    std::vector<std::string> cppItems;
    for (size_t i = 0; i < items.size(this->rt); ++i) {
        // Codegen 保证了数组元素是 string 类型
        cppItems.push_back(items.getValueAtIndex(this->rt, i).asString(this->rt).utf8(this->rt));
    }

    // 对 C++ 向量进行处理，例如转换为大写
    std::transform(cppItems.begin(), cppItems.end(), cppItems.begin(),
                   [](std::string s){
                       std::transform(s.begin(), s.end(), s.begin(), ::toupper);
                       return s;
                   });

    // 将处理后的 C++ 向量转换回 JSI Array
    jsi::Array resultArray = jsi::Array(this->rt, cppItems.size());
    for (size_t i = 0; i < cppItems.size(); ++i) {
        resultArray.setValueAtIndex(this->rt, i, jsi::String::createFromUtf8(this->rt, cppItems[i]));
    }
    return resultArray;
}

} // namespace mycustommodule

关键点：

• C++ 实现严格遵循 NativeMyCustomModuleSpec 定义的接口。
• this->rt 提供了对 JSI 运行时对象的访问，用于创建 JSI 值（jsi::String::createFromAscii）或从 JSI 值中提取数据（asString(this->rt)）。
• 对于复杂类型 (jsi::Object, jsi::Array)，需要手动在 C++ 层面进行属性提取和值构建。尽管如此，Codegen 已经保证了传入的 jsi::Object 或 jsi::Array 的 结构 是符合预期的，原生开发者无需担心顶层类型不匹配。

5.4 Step 4: 注册 C++ 模块工厂

最后，为了让 React Native 运行时能够发现并实例化 MyCustomModule，我们需要注册一个模块工厂。这通常通过平台特定的宏完成。

iOS (Objective-C++) 示例 (MyCustomModule.mm):

// MyCustomModule.mm
#import <React/RCTBridgeModule.h>
#import <react/renderer/components/MyCustomModule/RCTMyCustomModuleSpec.h> // Codegen 生成的 ObjC 头文件

// 这是 iOS 平台特定的注册宏，用于告诉 React Native 你的 TurboModule 实现了哪个 Spec
// 实际的项目中，这个文件会由 Codegen 自动生成，或者你只需要实现 C++ 模块，
// 然后通过一个简单的工厂函数将其暴露。
// 这里的注册方式可能因 React Native 版本略有差异，但核心思想是注册一个模块工厂。

// 假设我们有一个工厂函数
std::shared_ptr<facebook::react::TurboModule> MyCustomModule_create(
    std::shared_ptr<facebook::react::CallInvoker> jsInvoker) {
  return std::make_shared<mycustommodule::MyCustomModule>(std::move(jsInvoker));
}

// 通过宏注册工厂函数
#if RCT_NEW_ARCH_ENABLED
// 这里的宏定义可能在不同版本有所不同
// 例如：RCT_EXPORT_MODULE_WITH_SPEC(NativeMyCustomModule, RCTMyCustomModuleSpec, MyCustomModule_create)
// 或者更复杂的注册机制，具体查看 React Native 官方文档
#endif

Android (Java) 示例 (MyCustomModulePackage.java):

// MyCustomModulePackage.java
package com.mycustommodule;

import com.facebook.react.TurboReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;
import com.mycustommodule.NativeMyCustomModuleSpec; // Codegen 生成的 Java 接口

import java.util.Collections;
import java.util.HashMap;
import java.util.Map;

// 这是一个 Java 包，用于注册 TurboModule。
// Codegen 会生成一个名为 NativeMyCustomModuleSpec 的 Java 接口，
// 你的 Java 实现需要实现这个接口。
public class MyCustomModulePackage extends TurboReactPackage {

    @Override
    public NativeModule getModule(String name, ReactApplicationContext reactContext) {
        if (name.equals(NativeMyCustomModuleSpec.NAME)) {
            // 这里我们返回一个 NativeMyCustomModule 的 Java 实现
            // 这个 Java 实现会桥接 C++ 模块
            // 实际的 TurboModule 通常会有一个 C++ 后端，Java 端只是一个轻量级包装器
            return new NativeMyCustomModule(reactContext);
        }
        return null;
    }

    @Override
    public ReactModuleInfoProvider getReactModuleInfoProvider() {
        return () -> {
            final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
            // 注册模块信息
            moduleInfos.put(
                    NativeMyCustomModuleSpec.NAME,
                    new ReactModuleInfo(
                            NativeMyCustomModuleSpec.NAME,
                            "NativeMyCustomModule", // 模块名称
                            false, // canOverrideExistingModule
                            false, // needsEagerInit
                            true, // has
                            false, // isCxxModule
                            true // isTurboModule
                    ));
            return moduleInfos;
        };
    }
}

注意： 对于 Android，通常会有一个 Java 层面的 TurboModule 实现 (NativeMyCustomModule.java)，它会通过 JNI (Java Native Interface) 或更高级的 C++ 绑定机制来调用底层的 C++ MyCustomModule。Codegen 也会生成这个 Java 接口，确保 Java 包装器遵循 TypeScript Spec。

通过以上步骤，我们看到 Codegen 如何从一个 TypeScript Spec 出发，生成 C++ 接口，并强制 C++ 实现遵守这个接口，从而在编译时保证了 JS 和 C++ 之间的类型安全性。

6. Codegen 带来的类型安全优势总结

Codegen 在 React Native New Architecture 中扮演着核心角色，它为 JS 与 C++ 之间的交互带来了前所未有的类型安全保障。

特性	描述
编译时类型检查	Codegen 生成的 C++ 接口是纯虚函数，这意味着如果 C++ 实现的签名（方法名、参数类型、返回值类型）与 TypeScript Spec 不匹配，C++ 编译器会在构建时（而非运行时）报错。这极大地提前了错误发现的时间，降低了调试成本。
单一事实来源	TypeScript Spec 文件是 JS 层和 C++ 层 API 的唯一权威定义。开发者只需要维护一个文件，Codegen 负责生成所有平台所需的适配代码。这消除了手动同步多语言接口时容易引入的错误。
减少运行时错误	在旧架构中，JS 传递的类型错误（例如，期望 number 却传入 string）只能在原生代码运行时进行手动检查，如果处理不当会导致崩溃。Codegen 确保了类型在边界处的自动验证和转换，或者在编译时强制类型匹配，从而大幅减少了这类运行时错误。
更清晰的契约	TypeScript Spec 提供了一个清晰、易读的 API 契约。无论是前端 JS 开发者还是后端 C++ 开发者，都能从这份 Spec 中明确了解模块的功能、输入和输出，减少沟通成本和误解。
更好的开发者体验
IDE 支持	由于有了明确的 TypeScript Spec，IDE（如 VS Code）可以为 JS/TS 开发者提供准确的自动补全、参数提示和类型检查。对于 C++ 开发者，生成的 C++ 头文件也让其能够利用 IDE 的 C++ 智能感知功能。
自动化	Codegen 自动化了大量重复且易错的“胶水代码”的编写，让开发者可以专注于业务逻辑的实现，而不是繁琐的跨语言接口适配。
跨平台一致性	由于所有平台（iOS 和 Android）都基于同一个 TypeScript Spec 生成 C++ 接口，并通过 C++ 层进行统一管理，这确保了原生模块在不同平台上的行为和 API 一致性，避免了平台差异性带来的兼容问题。
性能优化基础	虽然 Codegen 主要关注类型安全，但它通过生成直接与 JSI 交互的代码，也为高性能的通信奠定了基础。类型安全的接口减少了运行时类型检查和转换的开销，使得数据传输更加高效。

7. 挑战与注意事项

尽管 Codegen 带来了巨大的优势，但在实际应用中也存在一些挑战和注意事项：

• 学习曲线： 新架构引入了 JSI、Codegen、TurboModules 等新概念，对于不熟悉 C++ 或原生开发的 JS 开发者来说，学习曲线会比较陡峭。
• 构建复杂性： Codegen 增加了构建过程的复杂性，需要确保 Codegen 工具链的正确配置和版本兼容性。构建问题可能更难以诊断。
• 复杂类型映射： 虽然基本类型和简单对象/数组的映射相对直接，但对于更复杂的自定义 C++ 类、枚举、联合类型或需要特定生命周期管理的对象，可能需要更精细的 react::bridging 机制或自定义 JSI 转换器。
• 调试体验： 跨越 JS、JSI 和 C++ 边界的调试可能会比纯 JS 或纯原生调试更复杂，需要掌握多线程和多语言调试工具。
• 现有模块迁移： 将旧的 Native Modules 迁移到 TurboModules 需要重新编写 TypeScript Spec 和 C++ 实现，这对于大型项目来说可能是一项耗时的工作。

8. 总结

React Native New Architecture 通过引入 JSI、TurboModules 和 Codegen，显著提升了框架的性能、可维护性和类型安全性。Codegen 作为其中的核心组件，通过自动化代码生成，在 JavaScript/TypeScript 应用程序层与底层 C++ 原生模块之间建立了一座类型安全的桥梁。

它将类型检查从运行时前置到编译时，极大地减少了潜在的错误，并提供了一个单一的、明确的 API 契约。这不仅提升了开发效率，降低了维护成本，也为 React Native 的长期发展奠定了坚实的基础，使其能够更好地应对未来移动应用开发的挑战。开发者现在可以更有信心地构建高性能、高质量的跨平台原生应用，因为 Codegen 正在默默守护着 JS 与 C++ 交互的每一次类型飞跃。