帮助改进此文档

AccessibilityInfo

本文档贡献者：sunnylqm(100.00%)

有时候我们希望知道用户的设备是否正在运行读屏应用。AccessibilityInfo正是用于此目的。你可以用它来查询读屏应用的当前状态，并且可以监听其状态变化。

示例

• 函数组件示例
• Class组件示例

import React, { useState, useEffect } from "react";
import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";

const App = () => {
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      handleReduceMotionToggled
    );
    AccessibilityInfo.addEventListener(
      "screenReaderChanged",
      handleScreenReaderToggled
    );

    AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
      setReduceMotionEnabled(reduceMotionEnabled);
    });
    AccessibilityInfo.isReduceMotionEnabled().then(screenReaderEnabled => {
      setScreenReaderEnabled(screenReaderEnabled);
    });
    return () => {
      AccessibilityInfo.removeEventListener(
        "reduceMotionChanged",
        handleReduceMotionToggled
      );

      AccessibilityInfo.removeEventListener(
        "screenReaderChanged",
        handleScreenReaderToggled
      );
    };
  }, []);

  const handleReduceMotionToggled = reduceMotionEnabled => {
    setReduceMotionEnabled(reduceMotionEnabled);
  };

  const handleScreenReaderToggled = screenReaderEnabled => {
    setScreenReaderEnabled(screenReaderEnabled);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        The reduce motion is {reduceMotionEnabled ? "enabled" : "disabled"}.
      </Text>
      <Text style={styles.status}>
        The screen reader is {screenReaderEnabled ? "enabled" : "disabled"}.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  status: {
    margin: 30
  }
});

export default App;

import React, { Component } from 'react';
import { AccessibilityInfo, View, Text, StyleSheet } from 'react-native';

class AccessibilityStatusExample extends Component {
  state = {
    reduceMotionEnabled: false,
    screenReaderEnabled: false,
  };

  componentDidMount() {
    AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      this._handleReduceMotionToggled
    );
    AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      this._handleScreenReaderToggled
    );

    AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
      this.setState({ reduceMotionEnabled });
    });
    AccessibilityInfo.isReduceMotionEnabled().then(screenReaderEnabled => {
      this.setState({ screenReaderEnabled });
    });
  }

  componentWillUnmount() {
    AccessibilityInfo.removeEventListener(
      'reduceMotionChanged',
      this._handleReduceMotionToggled
    );

    AccessibilityInfo.removeEventListener(
      'screenReaderChanged',
      this._handleScreenReaderToggled
    );
  }

  _handleReduceMotionToggled = reduceMotionEnabled => {
    this.setState({ reduceMotionEnabled });
  };

  _handleScreenReaderToggled = screenReaderEnabled => {
    this.setState({ screenReaderEnabled });
  };

  render() {
    return (
      <View style={this.styles.container}>
        <Text style={this.styles.status}>
          The reduce motion is{' '}
          {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}.
        </Text>
        <Text style={this.styles.status}>
          The screen reader is{' '}
          {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
        </Text>
      </View>
    );
  }

  styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    status: {
      margin: 30,
    },
  });
}

export default AccessibilityStatusExample;

---

文档

方法

isBoldTextEnabled()

static isBoldTextEnabled()

iOS-Only. Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is true when bold text is enabled and false otherwise.

isGrayscaleEnabled()

static isGrayscaleEnabled()

iOS-Only. Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is true when grayscale is enabled and false otherwise.

isInvertColorsEnabled()

static isInvertColorsEnabled()

iOS-Only. Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is true when invert colors is enabled and false otherwise.

isReduceMotionEnabled()

static isReduceMotionEnabled()

Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is true when reduce motion is enabled and false otherwise.

isReduceTransparencyEnabled()

static isReduceTransparencyEnabled()

iOS-Only. Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is true when a reduce transparency is enabled and false otherwise.

isScreenReaderEnabled()

static isScreenReaderEnabled()

查询读屏应用当前是否开启。返回值为一个 promise，最终解析值为一个布尔值。true表示开启状态，false反之。

---

addEventListener()

static addEventListener(eventName, handler)

添加一个监听函数，支持的事件类型如下：

• boldTextChanged: iOS-only event. Fires when the state of the bold text toggle changes. The argument to the event handler is a boolean. The boolean is true when bold text is enabled and false otherwise.
• grayscaleChanged: iOS-only event. Fires when the state of the gray scale toggle changes. The argument to the event handler is a boolean. The boolean is true when a gray scale is enabled and false otherwise.
• invertColorsChanged: iOS-only event. Fires when the state of the invert colors toggle changes. The argument to the event handler is a boolean. The boolean is true when invert colors is enabled and false otherwise.
• reduceMotionChanged: Fires when the state of the reduce motion toggle changes. The argument to the event handler is a boolean. The boolean is true when a reduce motion is enabled (or when "Transition Animation Scale" in "Developer options" is "Animation off") and false otherwise.
• screenReaderChanged: 读屏应用状态改变时触发。传递给监听函数的参数为布尔值，true表示开启状态，false反之。
• reduceTransparencyChanged: iOS-only event. Fires when the state of the reduce transparency toggle changes. The argument to the event handler is a boolean. The boolean is true when reduce transparency is enabled and false otherwise.
• announcementFinished: 仅 iOS 可用。在读屏软件完成一次朗读后触发。传递给监听函数的参数为一个字典，包含以下两个字段：
  • announcement: 读屏软件所读的字符串。
  • success: 此次朗读是否成功完成。

---

setAccessibilityFocus()

static setAccessibilityFocus(reactTag)

将读屏软件的焦点设置到某个 react 组件上。在 Android 等同于调用 UIManager.sendAccessibilityEvent(reactTag, UIManager.AccessibilityEventTypes.typeViewFocused);.

Note: Make sure that any View you want to receive the accessibility focus has accessible={true}.

---

announceForAccessibility()

static announceForAccessibility(announcement)

发送一个字符串给读屏应用朗读。

---

removeEventListener()

static removeEventListener(eventName, handler)

移除一个监听函数。