使用 Codegen

本指南将教你如何

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

它还介绍了生成的代码。

前提条件

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

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

为了本指南的目的，请使用 React Native CLI 创建一个项目，如下所示

bash
npx @react-native-community/cli@latest init SampleApp --version 0.76.0

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": {
      "modulesConformingToProtocol": {
        "RCTImageURLLoader": [
          "<iOS-class-conforming-to-RCTImageURLLoader>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetLoader",
        ],
        "RCTURLRequestHandler": [
          "<iOS-class-conforming-to-RCTURLRequestHandler>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetUploader",
        ],
        "RCTImageDataDecoder": [
          "<iOS-class-conforming-to-RCTImageDataDecoder>",
          // we don't have a good example for this, but it works in the same way. Pass the name of the class that implements the RCTImageDataDecoder. It must be a Native Module.
        ]
      },
      "componentProvider": {
        "<componentName>": "<iOS-class-implementing-the-component>"
      },
      "modulesProvider": {
        "<moduleName>": "<iOS-class-implementing-the-RCTModuleProvider-protocol>"
      }
    }
  },

你可以将此代码片段添加到你的应用并自定义各种字段

name: 这是用于创建包含你的规范文件的名称。按照惯例，它应该带有后缀 Spec，但这并非强制性要求。
type: 我们需要生成的代码类型。允许的值为 modules、components、all。
- modules: 如果你只需要为 Turbo Native Modules 生成代码，请使用此值。
- components: 如果你只需要为 Native Fabric Components 生成代码，请使用此值。
- all: 如果你同时有组件和模块，请使用此值。
jsSrcsDir: 这是所有规范文件所在的根文件夹。
android.javaPackageName: 这是一个 Android 特定的设置，用于让 Codegen 在自定义包中生成文件。
ios: ios 字段是一个对象，可供应用开发者和库维护者使用，以提供一些高级功能。以下所有字段都是可选的。
- ios.modulesConformingToProtocol: React Native 提供了一些协议，原生模块可以实现这些协议来自定义某些行为。这些字段允许你定义符合这些协议的模块列表。这些模块将在应用启动时注入到 React Native 运行时中。
  - ios.modulesConformingToProtocol.RCTImageURLLoader: 实现 RCTImageURLLoader 协议的 iOS 原生模块列表。你需要传递实现 RCTImageURLLoader 的 iOS 类的类名。它们必须是原生模块。
  - ios.modulesConformingToProtocol.RCTURLRequestHandler: 实现 RCTURLRequestHandler 协议的 iOS 原生模块列表。你需要传递实现 RCTURLRequestHandler 的 iOS 类的类名。它们必须是原生模块。
  - ios.modulesConformingToProtocol.RCTImageDataDecoder: 实现 RCTImageDataDecoder 协议的 iOS 原生模块列表。你需要传递实现 RCTImageDataDecoder 的 iOS 类的类名。它们必须是原生模块。
- ios.componentProvider: 此字段是一个映射，用于生成自定义 JS React 组件和实现它的原生类之间的关联。映射的键是组件的 JS 名称（例如 TextInput），值是实现该组件的 iOS 类（例如 RCTTextInput）。
- ios.modulesProvider: 此字段是一个映射，用于生成自定义 JS Native Module 和可以提供它的原生类之间的关联。映射的键是模块的 JS 名称（例如 NativeLocalStorage），值是实现 RCTModuleProvider 协议的 iOS 类。对于 Objective-C 模块，实现 RCTTurboModule 协议的类也实现了 RCTModuleProvider 协议。有关更多信息，请参阅跨平台原生模块 (C++) 指南。

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

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

运行 Codegen

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

Android

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

bash

./gradlew generateCodegenArtifactsFromSchema

此任务在应用的所有导入项目（应用和所有链接到它的 node_modules）上调用 generateCodegenArtifactsFromSchema 命令。它在相应的 node_modules/<dependency> 文件夹中生成代码。例如，如果你有一个 Node 模块名为 my-fabric-component 的 Fabric Native 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 脚本。要调用该脚本，你可以从你的应用的根文件夹运行以下命令

bash
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 是你想为其生成代码的平台。

生成的代码

使用这些参数运行脚本

shell
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

生成的代码