使用 Codegen
本指南介绍如何
- 配置 Codegen。
- 手动为每个平台调用它。
它还描述了生成的代码。
先决条件
即使手动调用 Codegen，也始终需要一个 React Native 应用程序才能正确生成代码。
Codegen 过程与应用程序的构建紧密耦合，并且脚本位于 react-native NPM 包中。
为了本指南的目的，请使用 React Native CLI 创建一个项目，如下所示
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 的自定义字段控制。
"codegenConfig": {
"name": "<SpecName>",
"type": "<types>",
"jsSrcsDir": "<source_dir>",
"android": {
"javaPackageName": "<java.package.name>"
}
},
您可以将此代码段添加到您的应用程序并自定义各种字段
name:这是用于创建包含规范的文件的名称。按照惯例，它应该以Spec结尾，但这不是强制性的。type: 我们需要生成的代码类型。允许的值为modules、components、all。modules:仅需为 Turbo Native Modules 生成代码时使用此值。components:仅需为 Native Fabric Components 生成代码时使用此值。all: 同时存在组件和模块时使用此值。
jsSrcsDir: 这是所有规范所在的根文件夹。android.javaPackageName: 这是一个 Android 特定的设置，用于让 Codegen 在自定义包中生成文件。
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 插件 (RNGP) 集成。RNGP 包含一个可调用的任务，该任务读取 package.json 文件中定义的配置并执行 Codegen。要运行 Gradle 任务，请先导航到项目中的 android 文件夹。然后运行
./gradlew generateCodegenArtifactsFromSchema
此任务在应用程序的所有导入项目（应用程序和链接到它的所有节点模块）上调用 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 文件夹中找到代码生成代码。结构如下所示
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 组件生成的代码。
<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 在核心部分使用。然后有一组文件包含您在 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>: 此文件夹包含自定义组件所需的全部粘合代码。
此结构是使用 codegenConfig.type 字段的 all 值生成的。如果使用 modules 值，则预计不会看到 react/renderer/components/ 文件夹。如果使用 components 值，则预计不会看到任何其他文件。