如何在React Native Expo托管的应用程序中导入AccessibilityInfo？

Question

我正在开发我的第一个React Native项目。这是一个使用SDK 33的expo托管应用。

我想按照expo文档中描述的方法使用AccessibilityInfo API，文档链接在这里：https://docs.expo.io/versions/v33.0.0/react-native/accessibilityinfo/

该页面上的示例非常简单，但缺少一件事情：我从何处导入AccessibilityInfo？我的IDE自动补全建议我使用import {AccessibilityInfo} from "react-native-web";，但那似乎是错误的，因为我理解react-native-web是帮助将react-native功能引入Web应用程序的工具。

所以我使用import {AccessibilityInfo} from "react-native";代替。

但当我在组件中尝试以下操作时：

componentDidMount () {
    AccessibilityInfo.isScreenReaderEnabled().then( (screenReaderEnabled) => {
        console.log(screenReaderEnabled);
    });
}

我遇到了一个“TypeError：_reactNative.AccessibilityInfo.isScreenReaderEnabled不是一个函数”的问题。

根据IDE的自动完成提示，AccessibilityInfo模块仅有以下方法：addEventListener，announceForAccessibilty，fetch，removeEventListener，setAccessibilityFocus。但是根据上面链接的expo文档，我应该拥有其他方法，如isScreenReaderEnabled。

我唯一的猜测是我没有正确地导入模块。但是在谷歌上搜索时我没有找到任何有趣的东西。所以有人可以指引我解决这个问题吗？

- Gabriel

---

你能试试这个吗？import AccessibilityInfo from "AccessibilityInfo" - hong developer

@Train：我知道这个信息在源代码和文档中都有。所以我不明白为什么我无法访问它... - Gabriel

@hongdevelop：从AccessibilityInfo导入返回一个未定义的错误... - Gabriel

我提供了错误的链接，请查看ScreenReaderStatusExample组件以及他们如何使用它 https://github.com/facebook/react-native/blob/3b6f6ca4d5fcee6f1bc6d6242e3e2ef136e4d546/RNTester/js/examples/Accessibility/AccessibilityExample.js - Train

Answer 1

如果你看一下github，他们有这个例子。

import {AccessibilityInfo} from "react-native";
...
    class ScreenReaderStatusExample extends React.Component<{}> {
      state = {
        screenReaderEnabled: false,
      };

      componentDidMount() {
        AccessibilityInfo.addEventListener(
          'change',
          this._handleScreenReaderToggled,
        );
        AccessibilityInfo.fetch().done(isEnabled => {
          this.setState({
            screenReaderEnabled: isEnabled,
          });
        });
      }

      componentWillUnmount() {
        AccessibilityInfo.removeEventListener(
          'change',
          this._handleScreenReaderToggled,
        );
      }

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

      render() {
        return (
          <View>
            <Text>
              The screen reader is{' '}
              {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
            </Text>
          </View>
        );
      }
    }

在这个例子中，他们只是调用Fetch而不直接使用变量。

  componentDidMount() {
...
    AccessibilityInfo.fetch().done(isEnabled => {
      this.setState({
        screenReaderEnabled: isEnabled,
      });
    });
  }

该获取返回IsEnabled状态

因此在您的ComponentDidMount中，将其更改为

AccessibilityInfo.isScreenReaderEnabled().then( (screenReaderEnabled) => {
    console.log(screenReaderEnabled);
});

to

AccessibilityInfo.fetch().done(isEnabled => {
  this.setState({
    screenReaderEnabled: isEnabled,
  });
});

并将isEnabled的响应保留在状态中。

- Train

---

事实上，看起来.fetch()正在执行文档中所述的isScreenReaderEnabled()的功能。我猜测文档已经过时了，这就是问题的根源...感谢您指引我正确的方向！ - Gabriel