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

facebook/react-native

菜单

iOS 实现

相关源文件

本页面文档介绍了 React Native 的 iOS 特定实现，涵盖了原生 iOS 组件、初始化流程、CocoaPods 集成和组件渲染管道。它详细解释了使 React Native 应用程序能够在 iOS 设备上执行 JavaScript 代码和渲染原生 UI 组件的 iOS 运行时基础设施。

有关 Android 实现的信息，请参阅 Android 实现。

概述

React Native 的 iOS 实现提供了将 JavaScript 代码与原生 iOS API 和组件进行桥接所需的基础设施。它包含几个关键组件：

  1. 应用程序入口点 - RCTAppDelegate 和较新的 RCTReactNativeFactory
  2. CocoaPods 集成 - 通过 react_native_pods.rb 进行依赖管理
  3. 初始化流程 - 在 iOS 上引导 React Native 运行时
  4. 渲染管道 - 将 React 组件转换为 iOS 视图
  5. 原生模块系统 - 将 JavaScript 桥接到原生 iOS 功能

iOS 实现支持使用 Bridge 的旧版架构以及使用 Fabric 渲染器和 TurboModules 的新版架构。

iOS 实现架构

来源

应用初始化流程

React Native iOS 应用通过一系列初始化步骤进行引导，通常从 AppDelegate 类开始。

iOS 应用委托

iOS 应用的传统入口点是通过 AppDelegate。在 React Native 应用中，此类负责初始化 React Native 环境。推荐使用提供的 RCTReactNativeFactory，尽管旧版应用可能使用 RCTAppDelegate（现在已弃用）。

初始化过程会根据应用程序是否使用旧版 Bridge 架构或新的无 Bridge 架构而略有不同。

  1. 旧有架构:

    • 创建 RCTBridge 实例
    • 设置 JavaScript 执行器
    • 创建 RCTRootView 作为 React 组件的容器

  2. 新架构（无 Bridge 模式）

    • 创建 RCTHost 实例
    • 设置 JavaScript 运行时环境
    • 创建 RCTFabricSurface 以通过 Fabric 渲染组件

来源

根视图创建

RCTRootViewFactory 类负责创建将承载 React Native 内容的根视图。根据架构模式，它会创建：

  • 旧架构：RCTRootView
  • 新架构：RCTFabricSurface，包装在 RCTSurfaceHostingProxyRootView 中

来源

CocoaPods 集成

React Native 使用 CocoaPods 来管理 iOS 依赖项。这主要由 react_native_pods.rb 脚本处理。

Pod 安装

在将 React Native 集成到 iOS 应用中时，会从应用的 Podfile 调用 react_native_pods.rb 中的 use_react_native! 函数来设置所有必需的依赖项。

CocoaPods 集成期间执行的关键功能包括：

  1. 安装核心 Pods：React-Core、React-RCTImage 等核心库。
  2. 设置构建环境：配置编译器标志、头文件搜索路径等。
  3. 运行 Codegen：从 JavaScript 规范生成原生代码。
  4. 配置新架构：如果启用了 Fabric、TurboModules 和无 Bridge 模式，则进行设置。
  5. JavaScript 引擎设置：安装 Hermes（默认）或 JSC。

来源

特定于架构的 Pod 配置

CocoaPods 设置会根据是否启用新架构而有所不同。

对于新架构，会应用额外的 Pod 配置：

  1. 与 Fabric 相关的 Pods：React-Fabric、React-graphics 等。
  2. 与 TurboModule 相关的 Pods：ReactCommon/turbomodule/core 等。
  3. C++ 标准设置：新架构设置为 c++20。

来源

组件渲染管道

React Native 在 iOS 上维护一个渲染管道，该管道将 React 组件转换为原生 UIKit 视图。

iOS 渲染架构

iOS 渲染管道包括：

  1. 影子树：一个镜像组件层级的 C++ 树。
  2. Yoga 布局引擎：计算组件的布局。
  3. 组件视图工厂：创建和管理 UIKit 视图。
  4. 挂载层：将操作应用于视图层级。

来源

组件视图工厂

RCTComponentViewFactory 负责创建和管理与 React 组件对应的原生 UIKit 视图。

  1. 它维护一个组件视图类的注册表。
  2. 它在组件挂载时按需创建视图。
  3. 它支持内置组件和自定义组件。
  4. 它管理视图的回收以获得更好的性能。

在新架构中，组件通过 RCTComponentViewFactoryComponentProvider 协议进行注册。

来源

Bridge 和无 Bridge 模式

React Native iOS 支持两种运行模式：Bridge 模式（旧版）和无 Bridge 模式（新架构）。

Bridge 模式

在旧版架构中，RCTBridge 类促进了 JavaScript 和原生代码之间的通信。

  1. JavaScript 调用会被序列化，通过 Bridge 发送，并在原生端反序列化。
  2. 原生模块方法通过注册表暴露。
  3. UI 更新通过 Bridge 流动。

来源

无 Bridge 模式

在新架构中，RCTHost 取代了 Bridge，使用直接的 JavaScript 接口 (JSI) 调用。

  1. JavaScript 可以直接调用原生代码，无需序列化/反序列化。
  2. TurboModules 提供对原生模块的同步访问。
  3. Fabric 渲染器直接处理 UI 更新。

来源

JavaScript 引擎集成

React Native iOS 支持两种 JavaScript 引擎：Hermes（默认）和 JavaScriptCore (JSC)。

Hermes 引擎集成

Hermes 是 React Native 的默认 JavaScript 引擎。集成在 CocoaPods 设置过程中处理。

使用 Hermes 时：

  1. 包含 hermes-engine Pod。
  2. 设置编译器标志以启用 Hermes。
  3. 使用特定于 Hermes 的执行器工厂。

来源

JavaScript 执行器工厂

JavaScript 执行器工厂会为选定的 JavaScript 引擎创建合适的执行器

来源

Fabric 渲染器（iOS）

Fabric 是 React Native 新的渲染系统，可以提高性能并启用新功能。

Fabric 在 iOS 上的集成

Fabric 渲染器通过几个关键组件进行集成

  1. RCTSurfacePresenter：管理 React 组件渲染的表面
  2. RCTFabricSurface：表示 React 组件的渲染表面
  3. RCTSurfaceHostingProxyRootView：一个承载 Fabric 表面的 UIView
  4. RCTComponentViewFactory：创建和管理 UIKit 视图

来源

阴影节点和挂载指令

Fabric 渲染管线使用 C++ 阴影树来计算布局并生成挂载指令

  1. React 组件被转换为 C++ 阴影节点
  2. Yoga 计算这些节点的布局
  3. 布局信息用于生成挂载指令
  4. 挂载指令在主线程上执行以更新 UIKit 视图

来源

结论

React Native 的 iOS 实现提供了 JavaScript 与原生 iOS 功能之间的桥梁。它使 React 组件能够渲染为原生 UIKit 视图，提供性能和原生外观。

该系统已发展为支持旧的 Bridge 架构和支持 Fabric 和 TurboModules 的新 Bridgeless 架构。虽然仍支持旧的架构，但开发重点是改进新架构以获得更好的性能和功能。

未来的 iOS 特定增强功能将继续构建在此基础上，并特别关注新架构组件。

来源