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

facebook/react-native

菜单

UI 组件与样式

相关源文件

React Native 的 UI 组件和样式系统提供构建移动应用程序视觉界面的基础模块。本文档将介绍如何使用 React Native 的组件系统，以及如何使用类似于 CSS 的基于 JavaScript 的样式方法来对这些组件进行样式设置。

有关动画的信息，请参阅 动画系统。有关布局计算和 Flexbox 的详细信息，请参阅 布局引擎。

组件层次结构

React Native 提供了一套核心 UI 组件，这些组件可以映射到 iOS 和 Android 平台上的原生 UI 元素。这些组件的基础是 View 组件，它类似于 Web 开发中的 div。

来源

样式表系统

React Native 使用一个基于 JavaScript 的样式系统，该系统类似于 CSS，但用 JavaScript 实现。样式使用 StyleSheet.create() 方法定义，并作为 props 应用于组件。

来源

基本样式

在 React Native 中，样式定义为 JavaScript 对象，其属性使用 camelCase，类似于 CSS，但不完全相同。这些样式可以直接应用于组件，或使用 StyleSheet.create() 定义。

StyleSheet API

StyleSheet API 提供了一种优化的样式定义方式

样式随后使用 style prop 应用于组件

来源

样式属性

React Native 组件接受多种样式属性。以下是常见样式类别的表格：

样式类别示例描述
布局flex, flexDirection, width, height控制组件的尺寸和定位
外边距 (Margins)margin, marginTop, marginHorizontal控制组件外部的间距
填充padding, paddingLeft, paddingVertical控制组件内部的间距
边框borderWidth, borderRadius, borderColor控制组件边框
背景backgroundColor, backgroundImage控制组件背景
文本color, fontSize, fontWeight控制文本外观
变换transform, transformOrigin对组件应用变换
阴影shadowColor, shadowOpacity, boxShadow对组件应用阴影

来源

View 组件

View 组件是 React Native 中最基本的构建块。它是一个容器，支持使用 Flexbox 进行布局、样式设置、触摸处理和可访问性控制。

View 属性

View 组件接受各种属性来控制样式和行为。

来源

View 样式

View 样式控制 View 组件的外观和布局。它们包括：

  1. 布局属性：控制尺寸、位置和 Flexbox 行为。
  2. 视觉属性：控制颜色、边框和阴影等外观。
  3. 交互属性：控制组件如何响应用户交互。

典型的 View 样式示例

来源

样式继承与组合

React Native 的样式不像 Web 上的 CSS 那样具有级联性。相反，它使用更明确的组合模型。

样式数组

样式可以使用数组组合，后面的样式具有更高的优先级。

条件样式

样式可以通过 JavaScript 表达式有条件地应用。

StyleSheet.compose

StyleSheet.compose 方法允许组合样式。

来源

高级样式功能

React Native 包含一些超越基本 CSS 样式的的高级功能。

变换和动画

组件可以使用 transform 属性进行变换，该属性接受一个变换对象数组。

来源

阴影和 Z 轴高度 (Elevation)

React Native 支持 iOS 上的阴影和 Android 上的 Z 轴高度 (Elevation)。

来源

滤镜

React Native 支持滤镜，可用于对组件应用视觉效果。

来源

平台特定样式

React Native 允许您为 iOS 和 Android 创建特定平台的样式。

Platform 模块

使用 Platform 模块

平台特定文件

使用特定平台的扩展名：

  • Component.ios.js - iOS 特定实现
  • Component.android.js - Android 特定实现

来源

动画组件

React Native 提供了一个 Animated API 来创建动画。核心组件（如 View、Text 和 Image）都有动画版本。

创建动画组件

createAnimatedComponent 函数用于创建普通组件的动画版本。

来源

样式实现细节

React Native 中的样式系统涉及 JavaScript 样式和原生平台样式之间的转换。

原生实现

在原生层：

  • iOS：样式被转换为 UIView 子类的属性。
  • Android：样式被转换为 ViewGroup 的属性和特性。

转换过程包括对以下内容的特殊处理：

  1. 颜色值（处理十六进制、RGB、命名颜色）
  2. 尺寸（处理点、百分比、“auto”）
  3. 变换（转换为原生变换矩阵）
  4. 布局属性（转换为 Yoga 布局引擎属性）

来源

ScrollView 和列表

ScrollView 是用于创建可滚动内容区域的核心组件。它接受广泛的样式和行为属性。

ScrollView 属性和样式

ScrollView 在标准 View 样式的基础上增加了额外的滚动相关属性。

像 FlatList 和 SectionList 这样的专用列表组件是构建在 ScrollView 之上的，并为长列表提供了高效的渲染。

来源

样式最佳实践

性能考量

  1. 使用 StyleSheet.create()：这可以实现样式 ID 缓存等优化。
  2. 尽量减少样式更改：频繁更改样式会影响性能。
  3. 动画时使用 transform 而非 position/layout：变换使用 GPU 以获得更好的性能。
  4. 使用 opacity 而非 visibility：不透明度可以进行硬件加速。

样式组织

  1. 按组件分组样式：将样式组织在它们所应用的组件周围。
  2. 使用一致的命名：为样式对象采用一致的命名约定。
  3. 创建基础/共享样式：提取通用样式以避免重复。
  4. 使用主题化样式：为整个应用实现一致的样式主题系统。

来源

结论

React Native 的 UI 组件和样式系统提供了一种强大的方式，使用熟悉的基于 JavaScript 的方法来构建跨平台的移动 UI。样式系统虽然受到 CSS 的启发，但已针对移动端进行了调整，并考虑了性能和跨平台兼容性。

理解组件层次结构、样式属性以及它们如何映射到原生元素，对于构建设计良好且高性能的 React Native 应用程序至关重要。