版本：0.81

使用 Codegen

本指南介绍如何：

配置 Codegen。
为每个平台手动调用它。

它还描述了生成的代码。

先决条件

即使手动调用 Codegen，您始终需要一个 React Native 应用才能正确生成代码。

Codegen 过程与应用的构建紧密耦合，脚本位于 react-native NPM 包中。

为了本指南的目的，请使用 React Native CLI 创建如下项目：

shell
npx @react-native-community/cli@latest init SampleApp --version 0.81

Codegen 用于为您的自定义模块或组件生成胶水代码。有关如何创建它们的更多详细信息，请参阅 Turbo Native Modules 和 Fabric Native Components 指南。

配置 Codegen

可以通过修改 package.json 文件在应用中配置 Codegen。Codegen 由一个名为 codegenConfig 的自定义字段控制。

package.json
  "codegenConfig": {
    "name": "<SpecName>",
    "type": "<types>",
    "jsSrcsDir": "<source_dir>",
    "android": {
      "javaPackageName": "<java.package.name>"
    },
    "ios": {
      "modules": {
        "TestModule": {
          "className": "<iOS-class-implementing-the-RCTModuleProvider-protocol>",
          "unstableRequiresMainQueueSetup": false,
          "conformsToProtocols": ["RCTImageURLLoader", "RCTURLRequestHandler", "RCTImageDataDecoder"],
        }
      },
      "components": {
        "TestComponent": {
          "className": "<iOS-class-implementing-the-component>"
        }
      }
    }
  },

您可以将此片段添加到您的应用并自定义各个字段：

name: codegen 配置的名称。这将自定义 codegen 输出：文件名和代码。
type:
- modules: 仅为模块生成代码。
- components: 仅为组件生成代码。
- all: 为所有内容生成代码。
jsSrcsDir: 所有 spec 文件所在的根文件夹。
android: Android 的 Codegen 配置（均为可选）：
- .javaPackageName: 配置 Android Java codegen 输出的包名。
ios: iOS 的 Codegen 配置（均为可选）：
- .modules[moduleName]:
  - .className: 此模块的 ObjC 类。或者，如果是仅 C++ 模块，则是其 RCTModuleProvider 类。
  - .unstableRequiresMainQueueSetup: 在运行任何 JavaScript 之前，在 UI Thread 上初始化此模块。
  - .conformsToProtocols: 标注此模块符合以下哪些协议：RCTImageURLLoader, RCTURLRequestHandler, RCTImageDataDecoder。
- .components[componentName]:
  - .className: 此组件的 ObjC 类（例如：TextInput -> RCTTextInput）。

当 Codegen 运行时，它会在应用的所有依赖项中搜索，寻找符合某些特定约定的 JS 文件，并生成所需的代码：

Turbo Native Modules 要求 spec 文件以 Native 为前缀。例如，NativeLocalStorage.ts 是 spec 文件的有效名称。
Native Fabric Components 要求 spec 文件以 NativeComponent 为后缀。例如，WebViewNativeComponent.ts 是 spec 文件的有效名称。

运行 Codegen

本指南的其余部分假设您已经在项目中设置了 Native Turbo Module、Native Fabric Component 或两者。我们还假设您在 package.json 中指定的 jsSrcsDir 中有有效的规范文件。

Android

Android 的 Codegen 与 React Native Gradle Plugin (RNGP) 集成。RNGP 包含一个任务，可以调用该任务来读取 package.json 文件中定义的配置并执行 Codegen。要运行 gradle 任务，首先导航到项目的 android 文件夹内。然后运行：

./gradlew generateCodegenArtifactsFromSchema

此任务在应用的所有导入项目（应用本身及其链接的所有 node modules）上调用 generateCodegenArtifactsFromSchema 命令。它在相应的 node_modules/<dependency> 文件夹中生成代码。例如，如果您有一个 Fabric Native Component，其 Node 模块称为 my-fabric-component，则生成的代码位于 SampleApp/node_modules/my-fabric-component/android/build/generated/source/codegen 路径。对于应用，代码生成在 android/app/build/generated/source/codegen 文件夹中。

生成的代码

运行上面的 gradle 命令后，您将在 SampleApp/android/app/build 文件夹中找到 codegen 代码。结构如下所示：

build
└── generated
    └── source
        └── codegen
            ├── java
            │   └── com
            │       ├── facebook
            │       │   └── react
            │       │       └── viewmanagers
            │       │           ├── <nativeComponent>ManagerDelegate.java
            │       │           └── <nativeComponent>ManagerInterface.java
            │       └── sampleapp
            │           └── NativeLocalStorageSpec.java
            ├── jni
            │   ├── <codegenConfig.name>-generated.cpp
            │   ├── <codegenConfig.name>.h
            │   ├── CMakeLists.txt
            │   └── react
            │       └── renderer
            │           └── components
            │               └── <codegenConfig.name>
            │                   ├── <codegenConfig.name>JSI-generated.cpp
            │                   ├── <codegenConfig.name>.h
            │                   ├── ComponentDescriptors.cpp
            │                   ├── ComponentDescriptors.h
            │                   ├── EventEmitters.cpp
            │                   ├── EventEmitters.h
            │                   ├── Props.cpp
            │                   ├── Props.h
            │                   ├── ShadowNodes.cpp
            │                   ├── ShadowNodes.h
            │                   ├── States.cpp
            │                   └── States.h
            └── schema.json

生成的代码分为两个文件夹：

java 包含平台特定代码
jni 包含让 JS 和 Java 正确交互所需的 C++ 代码。

在 java 文件夹中，您可以在 com/facebook/viewmanagers 子文件夹中找到 Fabric Native component 生成的代码。

<nativeComponent>ManagerDelegate.java 包含 ViewManager 可以在自定义 Native Component 上调用的方法
<nativeComponent>ManagerInterface.java 包含 ViewManager 的接口。

在 codegenConfig.android.javaPackageName 中设置的名称的文件夹中，您可以找到 Turbo Native Module 必须实现以执行其任务的抽象类。

最后，在 jni 文件夹中，这里有所有将 JS 连接到 Android 的样板代码。

<codegenConfig.name>.h 包含自定义 C++ Turbo Native Modules 的接口。
<codegenConfig.name>-generated.cpp 包含自定义 C++ Turbo Native Modules 的胶水代码。
react/renderer/components/<codegenConfig.name>: 此文件夹包含自定义组件所需的所有胶水代码。

此结构是通过为 codegenConfig.type 字段使用值 all 生成的。如果您使用值 modules，预计不会看到 react/renderer/components/ 文件夹。如果您使用值 components，预计不会看到任何其他文件。

iOS

iOS 的 Codegen 依赖于在构建过程中调用的一些 Node 脚本。脚本位于 SampleApp/node_modules/react-native/scripts/ 文件夹中。

主脚本是 generate-codegen-artifacts.js 脚本。要调用脚本，您可以从应用的根文件夹运行此命令：

node node_modules/react-native/scripts/generate-codegen-artifacts.js

Usage: generate-codegen-artifacts.js -p [path to app] -t [target platform] -o [output path]

Options:
      --help            Show help                                      [boolean]
      --version         Show version number                            [boolean]
  -p, --path            Path to the React Native project root.        [required]
  -t, --targetPlatform  Target platform. Supported values: "android", "ios",
                        "all".                                        [required]
  -o, --outputPath      Path where generated artifacts will be output to.

其中：

--path 是您应用根文件夹的路径。
--outputPath 是 Codegen 将写入生成文件的目标位置。
--targetPlatform 是您想要为其生成代码的平台。

生成的代码

使用这些参数运行脚本：

node node_modules/react-native/scripts/generate-codegen-artifacts.js \
    --path . \
    --outputPath ios/ \
    --targetPlatform ios

将在 ios/build 文件夹中生成这些文件：

build
└── generated
    └── ios
        ├── <codegenConfig.name>
        │   ├── <codegenConfig.name>-generated.mm
        │   └── <codegenConfig.name>.h
        ├── <codegenConfig.name>JSI-generated.cpp
        ├── <codegenConfig.name>JSI.h
        ├── FBReactNativeSpec
        │   ├── FBReactNativeSpec-generated.mm
        │   └── FBReactNativeSpec.h
        ├── FBReactNativeSpecJSI-generated.cpp
        ├── FBReactNativeSpecJSI.h
        ├── RCTModulesConformingToProtocolsProvider.h
        ├── RCTModulesConformingToProtocolsProvider.mm
        └── react
            └── renderer
                └── components
                    └── <codegenConfig.name>
                        ├── ComponentDescriptors.cpp
                        ├── ComponentDescriptors.h
                        ├── EventEmitters.cpp
                        ├── EventEmitters.h
                        ├── Props.cpp
                        ├── Props.h
                        ├── RCTComponentViewHelpers.h
                        ├── ShadowNodes.cpp
                        ├── ShadowNodes.h
                        ├── States.cpp
                        └── States.h

部分生成的文件被 React Native 在 Core 中使用。然后有一组文件包含您在 package.json codegenConfig.name 字段中指定的相同名称。

<codegenConfig.name>/<codegenConfig.name>.h: 包含自定义 iOS Turbo Native Modules 的接口。
<codegenConfig.name>/<codegenConfig.name>-generated.mm: 包含自定义 iOS Turbo Native Modules 的胶水代码。
<codegenConfig.name>JSI.h: 包含自定义 C++ Turbo Native Modules 的接口。
<codegenConfig.name>JSI-generated.h: 包含自定义 C++ Turbo Native Modules 的胶水代码。
react/renderer/components/<codegenConfig.name>: 此文件夹包含自定义组件所需的所有胶水代码。

先决条件​

配置 Codegen​

运行 Codegen​

Android​

生成的代码​

iOS​

生成的代码​

先决条件

配置 Codegen

运行 Codegen

Android

生成的代码

iOS

生成的代码