React Native如何触发VoiceOver/TalkBack通知用户视图文本切换变更

核心实现依赖RN官方内置的AccessibilityInfo模块，该模块提供的announceForAccessibility方法已完成iOS/Android双端原生适配：iOS端自动调用VoiceOver公告能力，Android端自动调用TalkBack播报能力，完全匹配你的需求。

第一步：导入依赖 #

从react-native核心库中导入对应API：

import { AccessibilityInfo } from 'react-native';

第二步：监听状态变化触发播报 #

在你控制文本切换的布尔变量变更时，调用API主动推送要朗读的文本即可，以下是完整示例代码：

import { useState, useEffect } from 'react';
import { Text, View, AccessibilityInfo } from 'react-native';

const OperationStatus = () => {
  // 跟踪操作是否完成的布尔变量
  const [isOperationDone, setIsOperationDone] = useState(false);

  // 监听状态变化，触发无障碍公告
  useEffect(() => {
    const noticeText = isOperationDone ? 'Text2对应的朗读文本' : 'Text1对应的朗读文本';
    AccessibilityInfo.announceForAccessibility(noticeText);
  }, [isOperationDone]);

  return (
    <View>
      {isOperationDone ? <Text>Text2</Text> : <Text>Text1</Text>}
    </View>
  );
};

export default OperationStatus;

额外适配注意事项 #

• 多语言适配：直接传入对应语言的公告文本即可，API会自动调用系统读屏工具朗读，无需额外处理
• 低版本Android兼容：如果出现部分系统不播报的情况，可以给承载文本的View加上accessibilityLiveRegion="polite"属性，这是Android专属的live region特性，和上述API配合可覆盖全系统版本，该属性在iOS端会被自动忽略，不会产生副作用
• 性能优化：如果需要仅在开启读屏服务时才触发播报，可以调用AccessibilityInfo.isScreenReaderEnabled()方法做前置判断，跳过非必要的调用

内容的提问来源于stack exchange，提问作者MejorSP