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

facebook/react-native

菜单

Android 实现

相关源文件

本文档提供了 React Native 在 Android 上的技术实现概览，重点关注其核心架构、渲染管线和关键原生组件。它解释了 React Native 组件如何渲染为 Android 视图，以及实现 JavaScript 和原生 Android 代码之间通信的机制。

有关 iOS 特定实现的信息，请参阅iOS 实现。

核心架构

React Native 在 Android 上包含几个关键的子系统，它们协同工作以将 JavaScript React 组件渲染为原生 Android 视图。该架构有两种不同的模式：传统的 Bridge 架构和较新的 Bridgeless 架构。

来源

Bridge 与 Bridgeless 架构对比

React Native 最初采用的 Bridge 架构（现已被视为遗留架构）通过序列化和发送批处理的 JSON 消息在 JavaScript 和原生线程之间进行通信。新的架构引入了“无 Bridge (bridgeless)”模式，通过 JSI (JavaScript Interface) 提供了 JavaScript 和原生代码之间的直接通信。

来源

实例管理

针对 Android 的 React Native 根据架构的不同，采用两种不同的实例管理方法：

  1. 传统架构：使用 ReactInstanceManager 管理 React 应用程序的生命周期
  2. 无 Bridge 架构：使用 ReactHostImpl （实现 ReactHost 接口）

ReactInstanceManager（传统）

ReactInstanceManager 负责创建和管理 CatalystInstance （其封装了 JavaScript VM），处理生命周期事件，并协调 React Native 与宿主 Android 应用程序之间的交互。

来源

ReactHost（无 Bridge）

在新架构中，ReactHost 是管理 React Native 实例的主要入口点。它抽象了 React 环境的创建和生命周期管理。

来源

UI 组件和渲染

React Native 使用一套核心的原生组件作为 UI 的构建块。这些组件由 Android 视图支持，并使用 Yoga 布局引擎进行布局。

关键组件

React Native 组件Android 实现基类目的
视图ReactViewGroupViewGroup其他组件的基础容器
文本ReactTextViewAppCompatTextView文本显示
ScrollViewReactScrollViewScrollView可滚动容器
图片ReactImageViewGenericDraweeView图像显示
TextInputReactEditTextEditText文本输入字段

来源

视图管理器

每个 React Native 组件都有一个对应的“视图管理器”（View Manager），负责创建和更新原生视图。这些管理器将 React 属性映射到原生视图属性。

来源

FabricUIManager 和 UI 渲染

FabricUIManager 是 React Native UI 管理系统中的核心组件，尤其是在新架构中。它负责协调 UI 更新并管理挂载过程。

来源

挂载过程

挂载过程是 React Native 响应 React 组件树变化而更新 UI 的方式。它涉及以下几个步骤：

  1. 在 C++ 中创建表示组件层级的影子树
  2. 使用 Yoga 计算布局
  3. 创建描述视图操作（创建、更新、删除）的挂载项
  4. 将挂载项分派到 UI 线程
  5. 执行挂载项以更新实际的 Android 视图

来源

ReactViewGroup：核心 Android 视图

ReactViewGroup 是 React Native View 组件的 Android 实现。它是一个专用的 ViewGroup，支持：

  • React 特有的触摸处理
  • 子视图裁剪
  • 自定义边框和背景
  • Z-index 支持
  • 溢出控制
  • 指针事件处理

来源

视图裁剪

React Native 允许视图通过裁剪和分离可视区域外的视图来优化渲染。这由 removeClippedSubviews 属性控制，并在 ReactViewGroup 中实现。

来源

与 Android Activities 和 Fragments 的集成

React Native 提供了几个类，用于与 Android 的 Activity 和 Fragment 系统集成：

类目的
ReactActivityReact Native 应用程序的基础 Activity
ReactActivityDelegate处理 Activity 中 React 特有功能的委托
ReactDelegate处理 Activities 和 Fragments 的常见 React 集成逻辑
ReactFragment用于嵌入 React Native 视图的基础 Fragment

来源

生命周期集成

React Native 与 Android activity 生命周期集成，以正确管理资源和应用程序状态：

Android 生命周期方法React Native 处理方式
onCreate初始化 React 委托并加载应用程序
onResumeonHostResume - 激活 JavaScript 执行
onPauseonHostPause - 暂停 JavaScript 执行
onDestroyonHostDestroy - 清理 React 实例
onBackPressed委托给 JS 或默认处理程序
onActivityResult转发到 JavaScript 模块
onNewIntent转发到 JavaScript 模块

来源

ThemedReactContext

ThemedReactContext 是一个特殊的 ReactContext，它封装了基础的 Android 上下文，并提供了对 React Native 功能的访问。它充当 React Native 组件和 Android 视图之间的桥梁。

此上下文对于以下方面至关重要：

  1. 提供对 React Native 的 JavaScript 和原生模块的访问
  2. 允许视图访问 React Native 功能
  3. 维护表面/视图与其关联的 React 实例之间的连接

来源

文本处理和布局

React Native Android 中的文本渲染通过一个专门的系统处理，该系统将 React Native 文本属性转换为具有适当样式的 Android Spannable 对象。

TextLayoutManager 负责：

  1. 创建文本测量和布局
  2. 应用文本属性（颜色、大小、粗细等）
  3. 处理文本装饰（下划线、删除线）
  4. 管理嵌套文本组件

来源

ScrollView 组件

React Native 通过 ReactScrollView （垂直滚动）和 ReactHorizontalScrollView （水平滚动）提供可滚动容器。这些组件分别扩展了 Android 的 ScrollView 和 HorizontalScrollView。

React Native 滚动视图的主要功能包括：

  1. 基于惯性的滚动
  2. 吸附到位置
  3. 分页支持
  4. 自定义滚动事件
  5. 溢出控制

来源

性能考量

React Native 包含多项针对 Android 性能的优化：

视图回收

与 Android 的 RecyclerView 类似，React Native 可以重用视图以减少内存消耗并提高性能。

来源

视图裁剪

通过从视图层次结构中移除可视区域之外的视图，React Native 可以提高渲染性能。

来源

结论

React Native 的 Android 实现提供了一个强大的框架，用于将 React 组件渲染为原生 Android 视图。它弥合了 JavaScript 和原生 Android 代码之间的鸿沟，允许开发者编写跨平台应用程序，同时利用原生性能和功能。

该架构由几个关键组件组成

  1. 实例管理：使用 ReactInstanceManager 或 ReactHost 管理 React Native 实例
  2. UI 组件：React 组件的原生实现（ReactViewGroup、ReactTextView 等）
  3. 视图管理器：控制原生视图创建和更新的类
  4. FabricUIManager：在 Fabric 渲染器中协调 UI 更新
  5. 集成组件：与 Android 组件系统集成的类，如 ReactActivity 和 ReactDelegate

了解此架构对于在 Android 上开发、调试和优化 React Native 应用程序至关重要。