语义

本页介绍如何在 RiveView 上启用语义，让你的 Rive 图形可被屏幕阅读器访问。要了解什么是语义以及如何将其添加到图形中，请参阅编辑器文档中的语义。

概述

在 Rive 编辑器中，你可以为图形的某些元素添加语义含义——例如 button、checkbox、tab、image、list、dialog 等角色，以及相关的标签、值、状态和动作。这些设置因角色而异。

在运行时，RiveView 会从正在运行的状态机中读取这些语义，并将它们暴露给 VoiceOver，同时随着状态机推进保持更新。在 iOS 上，这使用 Apple 运行时的语义支持。

⚠️

语义是选择启用的。默认模式为 Semantics.Off，因此在你为视图启用语义之前，不会创建任何无障碍元素。

必须在编辑器中定义语义才会产生效果。如果元素没有语义，则不会暴露给屏幕阅读器——无论你设置什么模式。请参阅功能支持，了解当前哪些运行时支持语义。

可用性

语义需要 @rive-app/react-native 0.5.0 或更高版本。

平台	支持
iOS	✅
Android	Coming soon

在 Android 上，semantics 属性会被接受，但目前没有效果。

语义模式

Semantics 枚举用于设置 RiveView 的屏幕阅读器集成模式：

模式	说明
Semantics.Off	默认。 禁用无障碍语义。无论屏幕阅读器状态如何，都不会创建无障碍元素。
Semantics.On	始终启用无障碍语义。元素会在每一帧创建并保持最新。
Semantics.Automatic	根据屏幕阅读器（VoiceOver）当前是否正在运行，自动启用或停用无障碍语义。

对于大多数应用，建议使用 Semantics.Automatic。它只会在屏幕阅读器处于活动状态时同步无障碍树，从而避免在未启用时产生不必要的工作。

用法

在 RiveView 上设置 semantics 属性：

import { RiveView, Semantics, useRiveFile } from '@rive-app/react-native';

export default function TabBar() {
  const { riveFile } = useRiveFile(require('./assets/tab_bar.riv'));

  return riveFile ? (
    <RiveView
      file={riveFile}
      style={{ width: '100%', height: 80 }}
      semantics={Semantics.Automatic}
    />
  ) : null;
}

完整设置示例请参见示例应用中的语义示例。