Question

我正在做我的第一个React Native项目。这是一个由SDK 33管理的博览会管理应用。

我要按照此处的博览会文档中所述使用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。但是根据上面链接的博览会文档，我应该有其他方法，例如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响应状态。

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

1 个答案: