View

构建 UI 最基本的组件是 `View`，它是一个容器，支持使用 flexbox 进行布局、样式、一些触摸处理和可访问性控制。`View` 直接映射到 React Native 运行所在平台上的原生视图，无论是 `UIView`、`

`、`android.view` 等。

`View` 被设计为嵌套在其他视图中，并且可以包含 0 到多个任何类型的子元素。

此示例创建一个 `View`，它包含两个带颜色的盒子和一个文本组件，并以带填充的一行显示。

注意

为了清晰和性能，`View`s 被设计为与 `StyleSheet` 一起使用，但也支持内联样式。

合成触摸事件

对于 `View` 响应器属性（例如 `onResponderMove`），传递给它们的合成触摸事件是 PressEvent 形式的。

参考

属性

`accessibilityActions`

辅助功能操作允许辅助技术以编程方式调用组件的操作。accessibilityActions 属性应包含操作对象的列表。每个操作对象应包含字段名和标签。

有关更多信息，请参阅辅助功能指南。

类型
数组

`accessibilityElementsHidden`
iOS

一个布尔值，指示给定的可访问性元素及其包含的任何可访问性元素是否隐藏。默认为 `false`。

有关更多信息，请参阅可访问性指南。

类型
布尔值

`accessibilityHint`

无障碍提示可帮助用户了解当他们在无障碍元素上执行操作时会发生什么，如果该结果无法从无障碍标签中清楚得知。

类型
字符串

`无障碍语言`
iOS

指示屏幕阅读器在用户与元素交互时应使用的语言值。它应遵循 BCP 47 规范。

有关更多信息，请参阅 iOS accessibilityLanguage 文档。

类型
字符串

`accessibilityIgnoresInvertColors`
iOS

一个值，指示当颜色反转开启时，此视图是否应该反转。值为 `true` 将告诉视图即使颜色反转开启也不要反转。

有关更多信息，请参阅可访问性指南。

类型
布尔值

`accessibilityLabel`

当用户与元素交互时，覆盖屏幕阅读器读取的文本。默认情况下，标签是通过遍历所有子元素并累积所有由空格分隔的 Text 节点来构建的。

类型
字符串

`accessibilityLiveRegion`
Android

向辅助功能服务指示当此视图更改时是否应通知用户。仅适用于 Android API >= 19。可能的值

`'none'` - 辅助功能服务不应宣布此视图的更改。
`'polite'` - 辅助功能服务应宣布此视图的更改。
`'assertive'` - 辅助功能服务应中断正在进行的语音以立即宣布此视图的更改。

请参阅Android `View` 文档作为参考。

类型
枚举('none', 'polite', 'assertive')

`accessibilityRole`

`accessibilityRole` 向辅助技术用户传达组件的用途。

accessibilityRole 可以是以下之一

`'none'` - 当元素没有角色时使用。
`'button'` - 当元素应被视为按钮时使用。
`'link'` - 当元素应被视为链接时使用。
`'search'` - 当文本字段元素也应被视为搜索字段时使用。
`'image'` - 当元素应被视为图像时使用。例如，可以与按钮或链接结合使用。
`'keyboardkey'` - 当元素充当键盘键时使用。
`'text'` - 当元素应被视为不能更改的静态文本时使用。
`'adjustable'` - 当元素可以“调整”（例如滑块）时使用。
`'imagebutton'` - 当元素应被视为按钮且也是图像时使用。
`'header'` - 当元素充当内容部分的标题时使用（例如导航栏的标题）。
`'summary'` - 当应用程序首次启动时，当应用程序首次启动时，可用于提供应用程序当前状况的快速摘要的元素。
`'alert'` - 当元素包含要呈现给用户的重要文本时使用。
`'checkbox'` - 当元素表示一个可以选中、未选中或具有混合选中状态的复选框时使用。
`'combobox'` - 当元素表示一个组合框时使用，它允许用户在多个选项中进行选择。
`'menu'` - 当组件是选项菜单时使用。
`'menubar'` - 当组件是多个菜单的容器时使用。
`'menuitem'` - 用于表示菜单中的项目。
`'progressbar'` - 用于表示指示任务进度的组件。
`'radio'` - 用于表示单选按钮。
`'radiogroup'` - 用于表示一组单选按钮。
`'scrollbar'` - 用于表示滚动条。
`'spinbutton'` - 用于表示一个打开选项列表的按钮。
`'switch'` - 用于表示一个可以打开和关闭的开关。
`'tab'` - 用于表示一个选项卡。
`'tablist'` - 用于表示一个选项卡列表。
`'timer'` - 用于表示一个计时器。
`'toolbar'` - 用于表示一个工具栏（操作按钮或组件的容器）。
`'grid'` - 与 ScrollView、VirtualizedList、FlatList 或 SectionList 一起使用以表示网格。为 Android GridView 添加网格进/出公告。

类型
字符串

`accessibilityState`

向辅助技术用户描述组件的当前状态。

有关更多信息，请参阅可访问性指南。

类型
对象：`{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}`

`accessibilityValue`

表示组件的当前值。它可以是组件值的文本描述，或者对于基于范围的组件（如滑块和进度条），它包含范围信息（最小值、当前值和最大值）。

有关更多信息，请参阅可访问性指南。

类型
对象：`{min: number, max: number, now: number, text: string}`

`accessibilityViewIsModal`
iOS

一个值，指示 VoiceOver 是否应忽略接收器同级视图中的元素。默认为 `false`。

有关更多信息，请参阅可访问性指南。

类型
布尔值

`accessible`

当 `true` 时，表示该视图是辅助功能元素，并且可被屏幕阅读器和硬件键盘等辅助技术发现。默认情况下，所有可触摸元素都是可访问的。

有关更多信息，请参阅可访问性指南。

`aria-busy`

表示元素正在被修改，辅助技术可能需要等待更改完成才能将更新通知用户。

类型	默认
布尔值	false

`aria-checked`

指示可检查元素的状态。此字段可以接受布尔值或“mixed”字符串来表示混合复选框。

类型	默认
布尔值，'mixed'	false

`aria-disabled`

表示元素可感知但已禁用，因此不可编辑或以其他方式操作。

类型	默认
布尔值	false

`aria-expanded`

指示可展开元素当前是展开还是折叠。

类型	默认
布尔值	false

`aria-hidden`

表示元素是否对辅助技术隐藏。

例如，在一个包含兄弟视图 A 和 B 的窗口中，将视图 B 的 aria-hidden 设置为 true 会导致 VoiceOver 忽略 B 元素及其子元素。

类型	默认
布尔值	false

`aria-label`

定义一个标记交互元素的字符串值。

类型
字符串

`aria-labelledby`
Android

标识标记应用该元素的元素。`aria-labelledby` 的值应与相关元素的 `nativeID` 匹配

tsx
<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

类型
字符串

`aria-live`
Android

指示元素将更新，并描述用户代理、辅助技术和用户可以从实时区域获得的更新类型。

off 辅助服务不应宣布此视图的更改。
polite 辅助服务应宣布此视图的更改。
assertive 辅助服务应中断正在进行的语音，立即宣布此视图的更改。

类型	默认
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

一个布尔值，指示 VoiceOver 是否应忽略接收器同级视图中的元素。优先于 `accessibilityViewIsModal` 属性。

类型	默认
布尔值	false

`aria-selected`

指示可选元素当前是否已选中。

类型
布尔值

`aria-valuemax`

表示基于范围的组件（例如滑块和进度条）的最大值。优先于 `accessibilityValue` 属性中的 `max` 值。

类型
数字

`aria-valuemin`

表示基于范围的组件（例如滑块和进度条）的最小值。优先于 `accessibilityValue` 属性中的 `min` 值。

类型
数字

`aria-valuenow`

表示基于范围的组件（例如滑块和进度条）的当前值。优先于 `accessibilityValue` 属性中的 `now` 值。

类型
数字

`aria-valuetext`

表示组件的文本描述。优先于 `accessibilityValue` 属性中的 `text` 值。

类型
字符串

`collapsable`

仅用于布局其子元素或不绘制任何内容的视图可能会作为优化自动从原生层级结构中移除。将此属性设置为 `false` 可禁用此优化并确保此 `View` 存在于原生视图层级结构中。

类型	默认
布尔值	true

`collapsableChildren`

设置为 false 可防止视图的直接子元素从原生视图层级结构中移除，这与在每个子元素上设置 `collapsable={false}` 的效果类似。

类型	默认
布尔值	true

`experimental_accessibilityOrder`

实验性 🧪

此 API 为实验性。 实验性 API 可能包含错误，并可能在 React Native 的未来版本中更改。请勿在生产环境中使用它们。

`experimental_accessibilityOrder` 指示辅助技术聚焦此 `View` 后代的顺序。此属性接受一个字符串数组，其中每个字符串都是正在定义顺序的某个后代组件的 `nativeID`。此属性本身不启用辅助功能，每个引用的组件仍需要通过将 `accessible` 设置为 true 来使其可访问。此属性既是可嵌套的又是穷尽的，这意味着

如果 `experimental_accessibilityOrder` 包含对某个不可访问组件的引用，它将以默认顺序聚焦该组件的后代。此外，它还可以包含对其他也具有 `experimental_accessibilityOrder` 的组件的引用。
如果某个可访问组件未直接在 `experimental_accessibilityOrder` 中引用，或未嵌套在 `experimental_accessibilityOrder` 中直接引用的某个容器内，则它将不可访问。

有关更多信息，请参阅辅助功能指南。

类型
字符串数组

`focusable`
Android

此 `View` 是否应可被非触摸输入设备聚焦，例如，通过硬件键盘接收焦点。

类型
布尔值

`hitSlop`

这定义了触摸事件可以从视图开始的距离。典型的界面指南建议触摸目标至少为 30 - 40 点/密度无关像素。

例如，如果一个可触摸视图的高度为 20，则可以通过 `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` 将可触摸高度扩展到 40

注意

触摸区域永远不会超出父视图边界，并且如果触摸命中两个重叠视图，则同级视图的 Z 轴顺序始终优先。

类型
对象：`{top: number, left: number, bottom: number, right: number}`

`id`

用于从原生类定位此视图。优先于 `nativeID` 属性。

警告

这将禁用此视图的“仅布局视图移除”优化！

类型
字符串

`importantForAccessibility`
Android

控制视图对于辅助功能的重要性，即它是否触发辅助功能事件以及是否向查询屏幕的辅助功能服务报告。仅适用于 Android。

可能的值

`'auto'` - 系统确定视图对于辅助功能是否重要 - 默认（推荐）。
`'yes'` - 视图对于辅助功能很重要。
`'no'` - 视图对于辅助功能不重要。
`'no-hide-descendants'` - 视图对于辅助功能不重要，其任何后代视图也不重要。

请参阅Android `importantForAccessibility` 文档作为参考。

类型
枚举('auto', 'yes', 'no', 'no-hide-descendants')

`nativeID`

用于从原生类定位此视图。

警告

这将禁用此视图的“仅布局视图移除”优化！

类型
字符串

`needsOffscreenAlphaCompositing`

此 `View` 是否需要离屏渲染并以 alpha 值合成，以保持 100% 正确的颜色和混合行为。默认值 (`false`) 回退到使用应用于绘制每个元素的颜料的 alpha 值绘制组件及其子元素，而不是离屏渲染整个组件并以 alpha 值将其合成回来。当您设置不透明度的 `View` 具有多个重叠元素（例如多个重叠的 `View` 或文本和背景）时，此默认值可能很明显且不希望。

为了保持正确的 alpha 行为而离屏渲染非常昂贵，并且对于非原生开发人员来说很难调试，这就是为什么它默认不开启的原因。如果您确实需要为动画启用此属性，如果视图内容是静态的（即不需要每帧重绘），请考虑将其与 renderToHardwareTextureAndroid 结合使用。如果启用该属性，此 View 将离屏渲染一次，保存到硬件纹理中，然后每帧以 alpha 值合成到屏幕上，而无需在 GPU 上切换渲染目标。

类型
布尔值

`nextFocusDown`
Android

指定当用户向下导航时接收焦点的下一个视图。请参阅Android 文档。

类型
数字

`nextFocusForward`
Android

指定当用户向前导航时接收焦点的下一个视图。请参阅Android 文档。

类型
数字

`nextFocusLeft`
Android

指定当用户向左导航时接收焦点的下一个视图。请参阅Android 文档。

类型
数字

`nextFocusRight`
Android

指定当用户向右导航时接收焦点的下一个视图。请参阅Android 文档。

类型
数字

`nextFocusUp`
Android

指定当用户向上导航时接收焦点的下一个视图。请参阅Android 文档。

类型
数字

`onAccessibilityAction`

当用户执行辅助功能操作时调用。此函数唯一的参数是一个事件，其中包含要执行的操作的名称。

有关更多信息，请参阅辅助功能指南。

类型
函数

`onAccessibilityEscape`
iOS

当 `accessible` 为 `true` 时，当用户执行逃脱手势时，系统将调用此函数。

类型
函数

`onAccessibilityTap`
iOS

当 `accessible` 为 true 时，当用户执行辅助功能点击手势时，系统将尝试调用此函数。

类型
函数

`onLayout`

在挂载和布局更改时调用。

此事件在布局计算完成后立即触发，但新布局在接收到事件时可能尚未反映在屏幕上，尤其是在布局动画正在进行时。

类型
`({nativeEvent: LayoutEvent}) => void`

`onMagicTap`
iOS

当 `accessible` 为 `true` 时，当用户执行魔法点击手势时，系统将调用此函数。

类型
函数

`onMoveShouldSetResponder`

此视图是否希望“声明”触摸响应性？当它不是响应器时，会在 `View` 上的每次触摸移动时调用此方法。

类型
`({nativeEvent: PressEvent}) => boolean`

`onMoveShouldSetResponderCapture`

如果父 `View` 希望阻止子 `View` 在移动时成为响应器，它应该有这个处理程序返回 `true`。

类型
`({nativeEvent: PressEvent}) => boolean`

`onResponderGrant`

视图现在正在响应触摸事件。这是突出显示并向用户展示正在发生的事情的时候。

在 Android 上，从此回调返回 true 可防止任何其他原生组件成为响应器，直到此响应器终止。

类型
`({nativeEvent: PressEvent}) => void \| boolean`

`onResponderMove`

用户正在移动他们的手指。

类型
`({nativeEvent: PressEvent}) => void`

`onResponderReject`

另一个响应器已经处于活动状态，并且不会将其释放给请求成为响应器的 `View`。

类型
`({nativeEvent: PressEvent}) => void`

`onResponderRelease`

在触摸结束时触发。

类型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminate`

响应器已被从 `View` 中取出。可能会在调用 `onResponderTerminationRequest` 后被其他视图取出，也可能在不请求的情况下被操作系统取出（例如，在 iOS 上使用控制中心/通知中心时发生）

类型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminationRequest`

其他 `View` 希望成为响应器并请求此 `View` 释放其响应器。返回 `true` 允许其释放。

类型
`({nativeEvent: PressEvent}) => void`

`onStartShouldSetResponder`

此视图是否希望在触摸开始时成为响应器？

类型
`({nativeEvent: PressEvent}) => boolean`

`onStartShouldSetResponderCapture`

如果父 `View` 希望阻止子 `View` 在触摸开始时成为响应器，它应该有这个处理程序返回 `true`。

类型
`({nativeEvent: PressEvent}) => boolean`

`pointerEvents`

控制 `View` 是否可以成为触摸事件的目标。

`'auto'`：视图可以成为触摸事件的目标。
`'none'`：视图永远不是触摸事件的目标。
`'box-none'`：视图永远不是触摸事件的目标，但其子视图可以是。它的行为就像视图在 CSS 中具有以下类

css
.box-none {
  pointer-events: none;
}
.box-none * {
  pointer-events: auto;
}

`'box-only'`：视图可以成为触摸事件的目标，但其子视图不能。它的行为就像视图在 CSS 中具有以下类

css
.box-only {
  pointer-events: auto;
}
.box-only * {
  pointer-events: none;
}

类型
枚举('box-none', 'none', 'box-only', 'auto')

`ref`

一个 ref 设置器，在挂载时将被分配一个元素节点。

`removeClippedSubviews`

这是一个由 `RCTView` 公开的保留性能属性，当存在许多子视图（其中大多数不在屏幕上）时，对于滚动内容非常有用。为了使此属性有效，它必须应用于包含许多超出其边界的子视图的视图。子视图也必须具有 `overflow: hidden`，容器视图（或其父视图之一）也应如此。

类型
布尔值

`renderToHardwareTextureAndroid`
Android

此 `View` 是否应将自身（及其所有子项）渲染到 GPU 上的单个硬件纹理中。

在 Android 上，这对于仅修改不透明度、旋转、平移和/或缩放的动画和交互很有用：在这种情况下，视图不必重绘，并且不需要重新执行显示列表。纹理可以重复使用并以不同的参数重新合成。缺点是这会占用有限的视频内存，因此此属性应在交互/动画结束时重新设置为 false。

类型
布尔值

`role`

`role` 向辅助技术用户传达组件的用途。优先于 `accessibilityRole` 属性。

类型
角色

`shouldRasterizeIOS`
iOS

此 `View` 是否应在合成之前渲染为位图。

在 iOS 上，这对于不修改此组件尺寸及其子组件的动画和交互很有用；例如，当平移静态视图的位置时，栅格化允许渲染器重用静态视图的缓存位图并在每帧期间快速合成它。

栅格化会产生离屏绘制过程，并且位图会消耗内存。使用此属性时进行测试和测量。

类型
布尔值

`style`

类型
View 样式

`tabIndex`
Android

此 `View` 是否应可被非触摸输入设备聚焦，例如，通过硬件键盘接收焦点。支持以下值

`0` - 视图可聚焦
`-1` - 视图不可聚焦

类型
枚举(0, -1)

`testID`

用于在端到端测试中定位此视图。

警告

这将禁用此视图的“仅布局视图移除”优化！

类型
字符串

合成触摸事件
属性

合成触摸事件​

参考

属性​

accessibilityActions​

accessibilityElementsHidden iOS​

accessibilityHint​

无障碍语言 iOS​

accessibilityIgnoresInvertColors iOS​

accessibilityLabel​

accessibilityLiveRegion Android​

accessibilityRole​

accessibilityState​

accessibilityValue​

accessibilityViewIsModal iOS​

accessible​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-labelledby Android​

aria-live Android​

aria-modal iOS​

aria-selected​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

`collapsable`​

`collapsableChildren`​

`experimental_accessibilityOrder`​

focusable Android​

hitSlop​

id​

importantForAccessibility Android​

nativeID​

`needsOffscreenAlphaCompositing`​

nextFocusDown Android​

nextFocusForward Android​

nextFocusLeft Android​

nextFocusRight Android​

nextFocusUp Android​

onAccessibilityAction​

onAccessibilityEscape iOS​

onAccessibilityTap iOS​

onLayout​

onMagicTap iOS​

`onMoveShouldSetResponder`​

`onMoveShouldSetResponderCapture`​

`onResponderGrant`​

`onResponderMove`​

`onResponderReject`​

`onResponderRelease`​

`onResponderTerminate`​

`onResponderTerminationRequest`​

`onStartShouldSetResponder`​

`onStartShouldSetResponderCapture`​

`pointerEvents`​

ref​

removeClippedSubviews​

renderToHardwareTextureAndroid Android​

role​

shouldRasterizeIOS iOS​

style​

tabIndex Android​

testID​

合成触摸事件

属性

`accessibilityActions`

`accessibilityElementsHidden`
iOS

`accessibilityHint`

`无障碍语言`
iOS

`accessibilityIgnoresInvertColors`
iOS

`accessibilityLabel`

`accessibilityLiveRegion`
Android

`accessibilityRole`

`accessibilityState`

`accessibilityValue`

`accessibilityViewIsModal`
iOS

`accessible`

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-hidden`

`aria-label`

`aria-labelledby`
Android

`aria-live`
Android

`aria-modal`
iOS

`aria-selected`

`aria-valuemax`

`aria-valuemin`

`aria-valuenow`

`aria-valuetext`

`collapsable`

`collapsableChildren`

`experimental_accessibilityOrder`

`focusable`
Android

`hitSlop`

`id`

`importantForAccessibility`
Android

`nativeID`

`needsOffscreenAlphaCompositing`

`nextFocusDown`
Android

`nextFocusForward`
Android

`nextFocusLeft`
Android

`nextFocusRight`
Android

`nextFocusUp`
Android

`onAccessibilityAction`

`onAccessibilityEscape`
iOS

`onAccessibilityTap`
iOS

`onLayout`

`onMagicTap`
iOS

`onMoveShouldSetResponder`

`onMoveShouldSetResponderCapture`

`onResponderGrant`

`onResponderMove`

`onResponderReject`

`onResponderRelease`

`onResponderTerminate`

`onResponderTerminationRequest`

`onStartShouldSetResponder`

`onStartShouldSetResponderCapture`

`pointerEvents`

`ref`

`removeClippedSubviews`

`renderToHardwareTextureAndroid`
Android

`role`

`shouldRasterizeIOS`
iOS

`style`

`tabIndex`
Android

`testID`