react-native - 我应该如何在 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 功能引入网络应用程序.

所以我改为 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。

我唯一的猜测是我没有导入正确的模块。但是我在谷歌搜索时没有发现任何有趣的东西。那么有人能指出正确的方向来帮助我解决这个问题吗？

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);
});

到

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

并将 isEnabled 响应保持在状态。