这个文档仍然是实验性的,随着我们的迭代,细节会有变化。欢迎在工作小组内的讨论中分享你的反馈。
此外,它还包含几个手动步骤。请注意新架构尚未稳定下来,最终的开发者体验会继续迭代改善。我们正在努力开发工具、模板和库,以帮助你在新架构上快速入门,而不需要经历整个设置过程。
Codegen 不算是新架构的主要组成部分,它是一个帮助我们避免编写重复代码的工具。Codegen 并非必选项,您仍然可以手写它所生成的代码,但是使用它来生成脚手架代码可以帮您节省不少时间。
React Native 会在每次构建 iOS 或 Android App 时调用 Codegen。您只需偶尔手动执行生成代码的脚本,以此声明需要生成哪些类型和文件。比方说,有个常见的场景就是开发 TurboModule 和 Fabric 组件。
本指引将指导您配置 Codegen,您将了解如何手动为每个平台调用 Codegen,以及它所生成的代码。
准备工作
您需要一个用于生成代码的 React Native App,即便您要自己手动调用 Codegen。
Codegen 代码生成过程与 App 的构建紧密相关,其脚本保存在 react-native
的 NPM 包中。
在本指引中,您需要使用 React Native CLI 创建一个工程,如下:
npx react-native init SampleApp --version 0.70.0
本指引将预设您使用的是 0.70.0 及以上版本。对于之前的版本,Codegen 的配置内容稍有不同。
然后,将调用 Codegen 的模块添加为 App 的一个 NPM 依赖:
yarn add <path/to/your/TurboModule_or_FabricComponent>
您可阅读 TurboModule 或 Fabric 组件 的开发章节,了解更多配置信息。
接下来的指引将默认您已经有个配置好的 TurboModule
或 Fabric 组件
。
iOS
运行 Codegen
针对 iOS 平台,需要在构建时调用 Node 脚本以调用 Codegen 生成代码。脚本保存在 MyApp/node_modules/react_native/scripts/
目录。
您需要运行的脚本文件为 generate-artifacts.js
,此脚本将在 App 的所有依赖中检索符合特定要求的 JS 文件(查看 TurboModules 和 Fabric 组件 章节,了解更多细节),并生成 App 所需的代码。
您可以在 App 的根目录,执行以下命令调用脚本:
node node_modules/react_native/scripts/generate-artifacts.js \
--path SampleApp/ \
--outputPath <an/output/path> \
鉴于 App 内已经配置了 TurboModules
或/和 Fabric 组件
的依赖,Codegen 将找到这些依赖,并生成代码至您指定的路径。
生成的代码
假设您在 App 内运行 Codegen 并指定输出路径为 codegen
,生成的目录文件结构如下:
codegen
└── build
└── generated
└── ios
├── MyTurboModuleSpecs
│ ├── MyTurboModuleSpecs-generated.mm
│ └── MyTurboModuleSpecs.h
├── FBReactNativeSpec
│ ├── FBReactNativeSpec-generated.mm
│ └── FBReactNativeSpec.h
├── RCTThirdPartyFabricComponentsProvider.h
├── RCTThirdPartyFabricComponentsProvider.mm
└── react
└── renderer
└── components
├── MyFabricComponent
│ ├── ComponentDescriptors.h
│ ├── EventEmitters.cpp
│ ├── EventEmitters.h
│ ├── Props.cpp
│ ├── Props.h
│ ├── RCTComponentViewHelpers.h
│ ├── ShadowNodes.cpp
│ └── ShadowNodes.h
└── rncore
├── ComponentDescriptors.h
├── EventEmitters.cpp
├── EventEmitters.h
├── Props.cpp
├── Props.h
├── RCTComponentViewHelpers.h
├── ShadowNodes.cpp
└── ShadowNodes.h
codegen
目录自然是整个结构的根基,里面还有两个以上的嵌套目录:build/generated
。
然后里面有一个 ios
目录,包含了:
- 为每个 TurboModule 单独创建的目录;
- RCTThirdPartyFabricComponentsProvider 的头文件(.h)和实现文件(.mm);
- 保存了所有 Fabric 组件的基本目录
react/renderer/components
。
在上面的例子中,里面包含了一个 TurboModule 还有一组 Fabric 组件。里面的组件 FBReactNativeSpec
和 rncore
都是由 React Native 生成的。这些模块即便您没有使用 TurbuModule 或 Fabric 组件都会自动生成,因为 React Native 需要使用它们来正常运行。
TurboModules
每个 TurboModule 的目录都包含两个文件:接口文件和实现文件。
接口文件的命名与 TurboModule 相同,里面包含了用于初始化 JSI 接口的方法。
而接口文件的命名另外加上了 -generated 的后缀,里面包含了用于原生平台和 JS 之间交互的逻辑代码。
Fabric 组件
每个 Fabric 组件目录内都包含了若干个文件。ShadowNode
是 Fabric 组件的基本元素,它代表在 React 抽象树上的一个节点。ShadowNode
表示的是一个 React 实体,因此它需要传入一些在 Props
文件定义的参数。有时候还另外需要一个 EventEmitter