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

facebook/react-native

菜单

Android UI 组件

相关源文件

本文档解释了 React Native 中的核心 Android UI 组件，包括它们的实现、层次结构以及它们如何协同工作以在 Android 上渲染 React Native 应用程序。它涵盖了与 React Native 组件对应的原生 Android 视图类以及它们如何与 React Native 架构进行交互。

有关 iOS UI 组件的信息，请参阅 iOS 组件渲染。有关驱动两个平台的通用布局引擎，请参阅 布局引擎。

组件架构概述

React Native 的 Android UI 组件构建在 Android View 系统之上，并具有用于连接 JavaScript 领域和原生 Android 视图的自定义实现。JavaScript 中的每个 React 组件都映射到 React Native 框架管理的相应原生 Android 视图。

来源

核心 Android 视图类

React Native 提供了几个自定义 Android 视图实现，构成了 UI 组件系统的基础。

ReactViewGroup

ReactViewGroup 是最基础的 UI 组件，它扩展了 Android 的 ViewGroup 类。它作为 React Native <View> 组件的基础，并提供对以下功能的支持：

  • 边框渲染
  • 子视图剪裁
  • 指针事件处理
  • 子视图的 Z 轴排序
  • 溢出控制

来源

ReactTextView

ReactTextView 扩展了 Android 的 AppCompatTextView 并实现了 React Native 的文本渲染功能，包括：

  • 自定义文本样式和格式
  • 字体大小调整
  • 字间距
  • 文本对齐
  • 支持文本中的内联视图和图像

来源

ReactScrollView 和 ReactHorizontalScrollView

这些视图分别扩展了 Android 的 ScrollView 和 HorizontalScrollView，增加了 React Native 特定的功能：

  • 动量滚动
  • 吸附对齐
  • 滚动事件节流
  • 分页支持
  • 溢出控制

它们处理垂直（ReactScrollView）和水平（ReactHorizontalScrollView）滚动用例。

来源

视图管理系统

React Native 使用一个管理系统来创建、更新和管理原生 Android 视图。

视图管理器 (View Managers)

每个 UI 组件都有一个对应的 ViewManager 类，负责：

  1. 创建视图：在 React Native 请求时实例化原生视图
  2. 设置属性：应用从 JavaScript 发送的属性
  3. 管理视图生命周期：处理更新和清理
  4. 自定义命令：执行来自 JavaScript 的命令式操作

关键管理器类包括：

管理器类视图类React Native 组件
ReactViewManagerReactViewGroup<View>
ReactTextViewManagerReactTextView<Text>
ReactImageManagerReactImageView<Image>
ReactScrollViewManagerReactScrollView<ScrollView> (垂直)
ReactHorizontalScrollViewManagerReactHorizontalScrollView<ScrollView horizontal>

来源

属性应用和样式

React Native Android UI 组件使用属性应用系统，将 JavaScript 中的样式和属性应用于原生视图。

属性系统通过以下方式工作：

  1. @ReactProp 注解：视图管理器使用这些注解来定义 JS 到原生属性的映射
  2. BackgroundStyleApplicator：处理复杂的样式属性，如边框、背景色等
  3. 属性差异比较：只有更改的属性通过 ReactStylesDiffMap 进行更新

处理的常见属性类型包括：

  • 边框样式（宽度、颜色、圆角）
  • 背景颜色和图像
  • 与布局相关的属性
  • 组件特定的属性（例如，文本对齐、图像缩放模式）

来源

视图剪裁和优化

React Native 为 Android 视图实现了一些优化技术。

RemoveClippedSubviews 优化

对于大型列表和复杂视图来说，一个关键的优化是 removeClippedSubviews 属性，它：

  1. 将位于可见区域之外的视图从视图层级中分离
  2. 将它们保留在内存中，以便在它们再次可见时快速重新附加
  3. 减少在布局和渲染期间需要处理的视图数量

实现涉及：

  • ReactClippingViewGroup 接口，由支持剪裁的视图实现
  • 在 ReactViewGroup 中的特殊视图附加/分离逻辑
  • 基于父视图边界和视图位置的剪裁矩形计算

来源

FabricUIManager 和视图挂载

在 Fabric 渲染器架构中，FabricUIManager 负责管理 UI 组件。

主要职责

  1. 视图创建：通过视图管理器创建原生视图
  2. 布局应用：应用来自 Shadow Tree 的布局信息
  3. 属性更新：将属性更新应用于原生视图
  4. 视图挂载：将视图添加到层级、更新和移除
  5. 事件分发：处理原生事件并将其发送到 JavaScript

来源

事件处理和交互

React Native 中的 Android UI 组件处理各种类型的用户交互和事件。

指针事件

React Native 通过 PointerEvents 枚举提供了一个可配置的系统来处理触摸事件。

  • AUTO：默认行为，组件及其子组件接收事件
  • NONE：组件及其子组件不接收事件
  • BOX_NONE：组件不接收事件，但子组件可以
  • BOX_ONLY：组件接收事件，但子组件不能

触摸处理在 ReactViewGroup 等视图类中通过以下方法实现：

  • onInterceptTouchEvent
  • onTouchEvent
  • dispatchGenericMotionEvent

来源

滚动事件

滚动视图为滚动交互分发专门的事件：

  • onScrollBeginDrag
  • onScroll
  • onScrollEndDrag
  • onMomentumScrollBegin
  • onMomentumScrollEnd

这些通过 ReactScrollViewHelper 类实现，该类处理事件节流和分发。

来源

通用视图自定义

React Native Android UI 组件实现了几个在应用程序中常用的自定义功能。

边框样式

像 ReactViewGroup 这样的组件支持全面的边框样式

  • 边框宽度（所有边或单独的边）
  • 边框颜色（所有边或单独的边）
  • 边框圆角（所有角或单独的角）
  • 边框样式（实线、虚线、点线）

来源

溢出行为

视图支持不同的溢出行为

  • visible: 默认，内容不裁剪
  • hidden: 内容裁剪到视图边界
  • scroll: 内容裁剪但可滚动

来源

文本渲染和测量

React Native Android 中的文本渲染使用专门的系统进行布局和测量。

文本渲染中的关键组件

  1. TextLayoutManager：处理文本测量和可跨度文本创建
  2. Spannables：带有样式信息的富文本表示
  3. Custom Spans：用于 React Native 特有文本功能的特殊跨度
  4. ReactTextView：显示文本的原生视图

来源

视图回收优化

React Native 支持视图回收以提高性能和减少内存消耗。

回收系统

  1. 重用视图而不是创建新视图
  2. 将视图属性重置为默认值
  3. 在回收之前将视图从其父级中移除
  4. 清除任何监听器或引用

来源

总结

React Native 中的 Android UI 组件提供了一整套原生视图和管理类，它们在 React 的声明式组件模型和 Android 的原生 UI 系统之间架起了桥梁。它们负责

  1. 视图创建和管理：通过专门的视图类和管理器
  2. 样式和属性应用：通过属性注解和样式应用器
  3. 性能优化：通过裁剪和回收机制
  4. 事件处理：通过可自定义的指针事件和专门的滚动事件
  5. 文本渲染：使用复杂的文本布局和测量系统

这些组件协同工作，创建了一个高性能的 UI 系统，该系统在利用原生 Android 功能的同时，维护了 React 的编程模型。