在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

facebook/react-native

菜单

代码生成

相关源文件

本文档描述了 React Native 中用于从 JavaScript 规范自动生成必要的原生代码（C++、Java、Objective-C）的代码生成系统。代码生成是连接 JavaScript 和原生世界的关键基础设施组件，可减少创建原生模块绑定和 UI 组件时的手动工作和潜在错误。

有关使用此代码生成的特定 React Native 构建管道的信息，请参阅 构建管道。

概述

React Native 中的代码生成系统可自动从 JavaScript 规范创建原生接口代码。它为以下内容生成样板代码：

  1. 原生模块 - JavaScript 调用原生平台函数所需的 C++、Java 和 Objective-C 实现
  2. UI 组件 - Shadow 节点、视图管理器和其他 Fabric 组件基础设施

这种自动化对于新架构（包括 TurboModules 和 Fabric）尤其重要，因为它依赖于 JavaScript 和原生代码之间的强类型接口。

来源

代码生成架构

代码生成系统由几个关键组件组成，它们在构建过程中协同工作

来源

关键组件

  1. @react-native/codegen

    • 核心代码生成引擎
    • 解析 JavaScript 规范并生成原生代码
    • 支持 Flow 和 TypeScript 进行类型定义

  2. @react-native/babel-plugin-codegen

    • Babel 插件，有助于在构建过程中提取类型信息
    • 用于预处理 JavaScript 文件以收集必要信息

  3. 构建系统集成

    • Android 的 Gradle 任务
    • iOS 的 CocoaPods 脚本阶段
    • CMake 与原生 C++ 代码集成

来源

配置代码生成

React Native 包通过 package.json 中的 codegenConfig 字段定义了哪些模块和组件应该被代码生成器处理。

此配置告诉代码生成器：

  • 要处理哪些库
  • 每个库的类型（模块或组件）
  • 平台特定配置
  • JavaScript 源文件所在位置

来源

代码生成过程

1. 准备工作

构建过程首先确保 CodeGen CLI 已构建

来源

2. 模式生成

处理 JavaScript 规范以提取模式

来源

3. 代码生成

然后使用模式生成特定于平台的代码

来源

生成产物

原生模块代码生成

对于原生模块，代码生成器创建：

  1. C++ 头文件 - 接口定义
  2. JNI 头文件 (Android) - C++/Java 互操作的 JNI 绑定
  3. Java 类 (Android) - Java 实现存根
  4. Objective-C 头文件/实现 (iOS) - ObjC 实现存根
  5. CMakeLists.txt (Android) - C++ 代码的构建配置

生成的 JNI 头文件示例

来源

生成器还会创建相应的 CMakeLists.txt 文件，以将生成的代码包含在构建过程中

来源

组件代码生成

对于 UI 组件（Fabric），代码生成器创建：

  1. C++ 组件描述符 - 用于 C++ 中的 shadow tree
  2. C++ 属性 - 类型安全的属性声明
  3. C++ 事件发射器 - 用于事件处理
  4. Java/Objective-C 视图管理器 - 特定于平台的视图实现

来源

与构建系统的集成

Android 集成

在 Android 中，代码生成与 Gradle 构建系统和 CMake 集成

  1. Gradle 构建任务会触发代码生成
  2. 生成的文件的位置在构建目录中
  3. CMake 将生成的代码包含在原生构建中

来源

iOS 集成

在 iOS 中，代码生成与 CocoaPods 集成

  1. CocoaPods 脚本阶段触发代码生成
  2. 生成的文件的会被包含在 Xcode 项目中
  3. 构建过程会编译生成的代码

来源

应用级集成

对于 React Native 应用，来自应用原生模块和组件的生成代码会被链接到应用的 createNative 模块

React Native Android 构建系统会设置必要的编译器标志以包含应用级的生成代码

来源

新架构集成

代码生成系统对于新架构（TurboModules、Fabric 和 Bridgeless 模式）尤其重要。DefaultTurboModuleManagerDelegate 和 DefaultComponentsRegistry 使用了生成代码

来源

常见问题与提示

生成文件位置

生成的文件的存储位置如下

平台生成文件位置
Androidproject/android/app/build/generated/source/codegen/
iOSproject/ios/build/generated/ios/

排查代码生成问题

如果代码生成失败，请检查以下内容：

  1. 确保您的 JavaScript 规范使用了正确的 Flow 或 TypeScript 语法
  2. 检查您的 package.json 中的 codegenConfig 是否配置正确
  3. 查看构建日志，其中可能指示代码生成过程中的具体错误
  4. 确保您的模块或组件已正确导出并添加了注解

清理生成的文件

运行以下命令时，通常会清理生成的文件：

  • ./gradlew clean (Android)
  • pod install --clean (iOS)

总结

React Native 代码生成系统通过 JavaScript 规范自动生成原生代码，从而减少了手动工作，并确保了 JavaScript 和原生代码之间的类型安全。它是 React Native 构建系统的关键部分，特别是对于新架构，并且与 Android 和 iOS 的构建流程都进行了集成。

通过代码生成，开发人员可以专注于编写带有正确类型注解的 JavaScript 规范，系统将负责创建适当的原生接口和实现。