构建管道

相关源文件

• .flowconfig
• flow-typed/npm/shelljs_v0.x.x.js
• package.json
• packages/assets/package.json
• packages/babel-plugin-codegen/package.json
• packages/community-cli-plugin/package.json
• packages/eslint-config-react-native/package.json
• packages/eslint-plugin-react-native/package.json
• packages/eslint-plugin-specs/package.json
• packages/metro-config/package.json
• packages/normalize-color/package.json
• packages/polyfills/package.json
• packages/react-native-babel-preset/package.json
• packages/react-native-babel-transformer/package.json
• packages/react-native-babel-transformer/src/__tests__/transform-test.js
• packages/react-native-babel-transformer/src/index.js
• packages/react-native-bots/dangerfile.js
• packages/react-native-bots/package.json
• packages/react-native-codegen-typescript-test/package.json
• packages/react-native-codegen/package.json
• packages/react-native-codegen/src/generators/modules/GenerateModuleJniH.js
• packages/react-native-codegen/src/generators/modules/__tests__/__snapshots__/GenerateModuleJniH-test.js.snap
• packages/react-native-popup-menu-android/android/src/main/jni/CMakeLists.txt
• packages/react-native-test-library/android/src/main/jni/CMakeLists.txt
• packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec
• packages/react-native/Libraries/AppState/AppState.js
• packages/react-native/Libraries/Blob/React-RCTBlob.podspec
• packages/react-native/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js
• packages/react-native/Libraries/Network/RCTNetworkTask.h
• packages/react-native/Libraries/Network/RCTNetworkTask.mm
• packages/react-native/Libraries/vendor/emitter/EventEmitter.js
• packages/react-native/React-Core.podspec
• packages/react-native/React/CoreModules/React-CoreModules.podspec
• packages/react-native/React/React-RCTFabric.podspec
• packages/react-native/ReactAndroid/build.gradle.kts
• packages/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultComponentsRegistry.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultNewArchitectureEntryPoint.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultSoLoader.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultTurboModuleManagerDelegate.kt
• packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/first-party/jni-lib-merge/SoMerging-utils.cmake
• packages/react-native/ReactAndroid/src/main/jni/first-party/jni-lib-merge/jni_lib_merge.h
• packages/react-native/ReactAndroid/src/main/jni/first-party/yogajni/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/OnLoad.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/featureflags/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/DefaultTurboModuleManagerDelegate.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/DefaultTurboModuleManagerDelegate.h
• packages/react-native/ReactAndroid/src/main/jni/react/runtime/hermes/jni/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/turbomodule/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/react/turbomodule/ReactCommon/OnLoad.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/uimanager/CMakeLists.txt
• packages/react-native/ReactAndroid/src/main/jni/third-party/folly/CMakeLists.txt
• packages/react-native/ReactCommon/React-Fabric.podspec
• packages/react-native/ReactCommon/React-FabricImage.podspec
• packages/react-native/ReactCommon/ReactCommon.podspec
• packages/react-native/ReactCommon/cxxreact/React-cxxreact.podspec
• packages/react-native/ReactCommon/hermes/React-hermes.podspec
• packages/react-native/ReactCommon/hermes/inspector-modern/CMakeLists.txt
• packages/react-native/ReactCommon/jserrorhandler/CMakeLists.txt
• packages/react-native/ReactCommon/jserrorhandler/React-jserrorhandler.podspec
• packages/react-native/ReactCommon/jsi/React-jsi.podspec
• packages/react-native/ReactCommon/jsiexecutor/React-jsiexecutor.podspec
• packages/react-native/ReactCommon/jsinspector-modern/Base64.h
• packages/react-native/ReactCommon/react/bridging/CMakeLists.txt
• packages/react-native/ReactCommon/react/debug/React-debug.podspec
• packages/react-native/ReactCommon/react/nativemodule/core/platform/ios/React-NativeModulesApple.podspec
• packages/react-native/ReactCommon/react/nativemodule/samples/ReactCommon-Samples.podspec
• packages/react-native/ReactCommon/react/nativemodule/samples/platform/android/CMakeLists.txt
• packages/react-native/ReactCommon/react/renderer/componentregistry/native/CMakeLists.txt
• packages/react-native/ReactCommon/react/renderer/components/progressbar/CMakeLists.txt
• packages/react-native/ReactCommon/react/renderer/debug/React-rendererdebug.podspec
• packages/react-native/ReactCommon/react/renderer/graphics/React-graphics.podspec
• packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/React-ImageManager.podspec
• packages/react-native/ReactCommon/react/renderer/observers/events/CMakeLists.txt
• packages/react-native/ReactCommon/react/renderer/runtimescheduler/CMakeLists.txt
• packages/react-native/ReactCommon/react/renderer/runtimescheduler/React-runtimescheduler.podspec
• packages/react-native/ReactCommon/react/runtime/CMakeLists.txt
• packages/react-native/ReactCommon/react/runtime/React-RuntimeCore.podspec
• packages/react-native/ReactCommon/react/runtime/React-RuntimeHermes.podspec
• packages/react-native/ReactCommon/react/runtime/hermes/CMakeLists.txt
• packages/react-native/ReactCommon/react/runtime/nativeviewconfig/CMakeLists.txt
• packages/react-native/ReactCommon/react/runtime/platform/ios/React-RuntimeApple.podspec
• packages/react-native/ReactCommon/react/utils/React-utils.podspec
• packages/react-native/package.json
• packages/react-native/scripts/cocoapods/__tests__/codegen_utils-test.rb
• packages/react-native/scripts/cocoapods/__tests__/new_architecture-test.rb
• packages/react-native/scripts/cocoapods/__tests__/test_utils/InstallerMock.rb
• packages/react-native/scripts/cocoapods/__tests__/test_utils/PathnameMock.rb
• packages/react-native/scripts/cocoapods/__tests__/test_utils/XcodeprojMock.rb
• packages/react-native/scripts/cocoapods/__tests__/utils-test.rb
• packages/react-native/scripts/cocoapods/codegen_utils.rb
• packages/react-native/scripts/cocoapods/new_architecture.rb
• packages/react-native/scripts/cocoapods/utils.rb
• packages/react-native/scripts/react_native_pods.rb
• packages/react-native/third-party-podspecs/RCT-Folly.podspec
• packages/rn-tester/Podfile.lock
• packages/rn-tester/RNTesterPods.xcodeproj/project.pbxproj
• packages/rn-tester/RNTesterUnitTests/RCTNetworkTaskTests.m
• packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js
• packages/rn-tester/package.json
• packages/virtualized-lists/package.json
• scripts/build-types/transforms/__tests__/replaceDefaultExportName-test.js
• yarn.lock

本页面文档记录了 React Native 构建流水线架构，它将你的源代码转换为可在 iOS 和 Android 平台上运行的应用程序。构建流水线通过协调一致的工具和流程系统，集成了 JavaScript、原生代码（Objective-C、Swift、Java、Kotlin）和 C++ 组件。

有关代码生成的具体信息，请参阅 代码生成。有关单仓库（monorepo）包组织结构，请参阅 包组织。

构建流程概览

React Native 构建流水线由几个相互关联的系统组成，它们协同工作以编译、打包和部署应用程序。

来源：package.json1-117 yarn.lock1-443 packages/react-native/ReactAndroid/build.gradle.kts1-80 packages/react-native/scripts/react_native_pods.rb1-50

JavaScript 构建系统

React Native 的 JavaScript 代码通过一个专门的流水线进行处理。

Metro 打包器负责打包 JavaScript 资源、应用转换并将最终的 bundle 提供给原生应用程序。默认的转换器是 @react-native/metro-babel-transformer，它应用 React Native 特定的 Babel 配置。

来源：packages/react-native-babel-transformer/package.json1-29 packages/react-native-babel-preset/package.json1-21 packages/metro-config/package.json1-30 packages/community-cli-plugin/package.json1-48

Babel 配置

React Native 的 Babel 预设包含专门针对 React Native 开发的转换，处理以下功能：

• Flow 类型
• JSX 语法
• 可选链
• 空值合并
• 动态导入
• 类属性

该预设定义在 @react-native/babel-preset 中，并被 Metro 转换器使用。

来源：packages/react-native-babel-preset/package.json16-29

原生构建系统

React Native 采用特定于平台的构建系统来编译和打包原生代码。

Android 构建系统

Android 构建系统使用 Gradle，并通过 Kotlin DSL 构建文件进行配置。

关键组件

• 下载并准备 C++ 依赖项
• 配置 CMake 以进行 C++ 编译
• 为 JavaScript 和原生代码之间的桥接生成代码
• 生成 AAR 工件，用于包含在 Android 应用程序中

来源：packages/react-native/ReactAndroid/build.gradle.kts1-459 packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt1-119 packages/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake1-123

iOS 构建系统

iOS 构建流水线主要通过 CocoaPods 进行管理。

iOS 构建系统高度依赖 CocoaPods 进行依赖管理和与 Xcode 的集成。核心文件 react_native_pods.rb 包含了 React Native iOS 构建的主要配置。

来源：packages/react-native/scripts/react_native_pods.rb1-100 packages/react-native/scripts/react_native_pods.rb400-471 packages/react-native/scripts/cocoapods/utils.rb1-100

C++ 依赖项

React Native 依赖于多个 C++ 库，这些库需要正确下载、准备和构建。

库	目的	版本 来源
Boost	通用 C++ 工具	libs.versions.toml
Folly	Facebook 开源库	libs.versions.toml
glog	Google 日志库	libs.versions.toml
DoubleConversion	字符串↔双精度浮点数转换	libs.versions.toml
fmt	格式化库	libs.versions.toml
fast_float	快速浮点数解析器	libs.versions.toml
Yoga	布局引擎	内部信息

准备过程因 Android 和 iOS 而异。

Android C++ 依赖项

Android 使用 Gradle 任务下载和准备 C++ 库。

1. 从源存储库下载存档
2. 提取到适当的目录
3. 使用 CMake 进行配置
4. 在 AAR 创建过程中进行构建

来源：packages/react-native/ReactAndroid/build.gradle.kts248-408

iOS C++ 依赖项

iOS 使用以下任一方式：

1. 通过 ReactNativeDependencies pod 进行预构建的依赖项
2. 通过单独的 podspec 进行源码构建的依赖项

选择由 ReactNativeDependenciesUtils.build_react_native_deps_from_source() 决定。

来源：packages/react-native/scripts/react_native_pods.rb172-181

构建流水线中的功能标志

功能标志在构建流水线中起着至关重要的作用，尤其是在新架构方面。

新架构组件（Fabric、TurboModules）根据环境变量和功能标志有条件地包含在内。

来源： packages/react-native/scripts/react_native_pods.rb62-99 packages/react-native/scripts/cocoapods/new_architecture.rb1-50 packages/react-native/defaults/DefaultNewArchitectureEntryPoint.kt1-110

构建脚本和入口点

Android 构建入口点

Android 构建的主要入口点

1. Gradle 任务:

   • :packages:react-native:ReactAndroid:build - 构建 React Native Android 库
   • 用于 C++ 依赖项的各种下载和准备任务

2. 架构入口点:

   • DefaultNewArchitectureEntryPoint - 配置和加载新架构

来源： packages/react-native/defaults/DefaultNewArchitectureEntryPoint.kt1-110 packages/react-native/defaults/DefaultTurboModuleManagerDelegate.kt1-21

iOS 构建入口点

对于 iOS，主要的构建入口点是

1. CocoaPods 函数:

   • use_react_native! - 将 React Native 包含到 iOS 项目中的主入口点
   • react_native_post_install - 安装后配置

2. 构建阶段:

   • 代码生成脚本阶段
   • 捆绑脚本阶段

来源： packages/react-native/scripts/react_native_pods.rb62-214 packages/react-native/scripts/react_native_pods.rb422-471

构建输出

构建流程会产生几个关键的产物

平台	产物	描述
JavaScript	index.bundle	打包后的 JavaScript 代码
JavaScript (Hermes)	index.bundle.hbc	Hermes 字节码
Android	libappmodules.so	原生模块共享库
Android	*.aar	库的 Android 归档文件
iOS	*.framework	iOS 框架
iOS	libReact.a	包含 React Native 的静态库
Codegen	生成的 C++/ObjC/Java 文件	用于 JavaScript-Native 通信的接口

来源： packages/react-native/package.json34-94 packages/rn-tester/package.json1-59

与应用程序代码集成

应用程序通过特定的配置文件与 React Native 构建流程集成

Android 集成

来源： packages/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake1-123 packages/react-native/defaults/DefaultNewArchitectureEntryPoint.kt31-69

iOS 集成

来源： packages/react-native/scripts/react_native_pods.rb62-214 packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec1-87

开发工具集成

构建流程集成了开发工具，以增强开发体验

1. Metro 开发服务器:

   • 提供热重载
   • 提供 JavaScript 包
   • 与 React DevTools 集成

2. 原生调试:

   • 与 Xcode 调试集成
   • Android Studio/Logcat 集成

3. 构建脚本:

   • 社区 CLI 命令（react-native run-android、react-native run-ios）
   • package.json 中的自定义脚本

来源： package.json7-38 packages/rn-tester/package.json15-27

结论

React Native 构建流程是一个复杂的系统，它协调 JavaScript、原生代码和 C++ 组件来生产跨平台应用程序。了解此流程的不同部分有助于开发人员有效地定制和排查其构建过程。

要点

• JavaScript 通过 Metro 打包器和 Hermes 或 JSC 进行处理
• 原生代码通过特定于平台的系统（Gradle、CocoaPods）进行构建
• C++ 依赖项在构建过程中需要特殊处理
• 新架构等功能标志会显著改变构建过程
• Codegen 弥合了 JavaScript 和原生组件之间的差距

来源： package.json1-117 packages/react-native/package.json1-184 packages/react-native/ReactAndroid/build.gradle.kts1-459 packages/react-native/scripts/react_native_pods.rb1-471