如何在 Expo React Native 应用程序中检查互联网连接？答案

【问题标题】：How to check for an internet connection in an Expo React Native app?如何在 Expo React Native 应用程序中检查互联网连接？
【发布时间】：2019-06-19 14:18:58
【问题描述】：

我有一个使用 Managed workflow 的 Expo 应用程序。该应用需要检查互联网连接是否可用。

我不能import { NetInfo } from 'react-native'，因为that's deprecated。
我不能使用react-native-community/react-native-netinfo，因为它使用了本机库，而你不能使用 Expo 托管的应用程序来做到这一点。
我可以弹出来使用上述内容，但我似乎不需要这样做来检查是否有互联网连接。
我无法使用 navigator.onLine，因为该全局变量似乎不可用。
我可以向 Google 或我自己的服务器或其他任何东西发出一个简单的 HTTP 请求，看看我是否得到响应，但这仅测试与一个站点的连接，而且它需要时间和带宽。

我该怎么办？

【问题讨论】：

我不明白。为什么我在使用Expo时必须将其取出才能使用netinfo模块？
@hongdevelop 您不能添加自己的本机模块或将react-native link 用于 Expo 托管项目。 docs.expo.io/versions/latest/introduction/faq/…
netinfo模块无需添加模块即可使用。
@hongdevelop 哪个NetInfo模块？被弃用的那个？
react-native 的 NetInfo

标签： react-native expo

【解决方案1】：

使用NetInfo 中的react-native。

是的，它已被弃用，因为他们计划在 react-native 的下一版本中将其删除，以支持社区版本。但是，它功能齐全，目前仍可使用，只需确保在Expo SDK 的下一个版本发布时检查是否存在重大更改。

当react-native 将其删除时，Expo 很可能会将其纳入其托管工作流程，或者提供不需要从 Expo 中退出的替代方案。

【讨论】：

【解决方案2】：

Expo SDK 34 已经包含了NetInfo API。

您可以在此处查看他们的 SDK 34 文档https://docs.expo.io/versions/v34.0.0/sdk/netinfo

这是latest version的文档链接

【讨论】：

【解决方案3】：

很难定义一个设备是否有互联网stackoverflow.com/a/189443/7602110，仅仅通过失败的 XHR 请求你可以说你有互联网，但不是那么可靠。您想查看一些可靠的网站，例如 google.com，我提供了一种解决方法，但我实际上并不推荐它，这取决于您。

您可以使用 React Native 本身的 Linking.canOpenUrl() 方法，该方法将返回一个 Promise 对象。当判断给定的 URL 是否可以处理时，promise 被解析，第一个参数是是否可以打开。

然后添加一个请求，如果响应状态是200，你应该可以上网。

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

export default class App extends Component {
  state = {
    connection: false,
    url: 'https://google.com',
  };

  checkInternt = () => {
    Linking.canOpenURL(this.state.url).then(connection => {
      if (!connection) {
        this.setState({ connection: false });
      } else {
        fetch(this.state.url).then(res =>
          this.setState({ connection: res.status !== 200 ? false : true })
        );
      }
    });
  };

  componentDidMount() {
    this.checkInternt();
  }

  handlePress = () => {
    this.setState({
      url:
        this.state.url === 'https://google.com'
          ? 'http://someweirdurlthatdoesntwork.com'
          : 'https://google.com',
    });
    this.checkInternt();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Connection:
          <Text style={{ color: this.state.connection ? 'green' : 'red' }}>
            {`   ${this.state.connection}`}
          </Text>
        </Text>
        <Text>{this.state.url.replace(/\https?:\/\//g, '')}</Text>
        <Button onPress={this.handlePress} title="Change server url" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

查看零食：snack.expo.io/@abranhe/check-internet

【讨论】：