检测用户是否连接到互联网？答案

【问题标题】：Detect if the user is connected to the internet?检测用户是否连接到互联网？
【发布时间】：2018-12-27 07:19:07
【问题描述】：

我想将用户路由到某个屏幕，以防他没有连接到互联网。

我只是无法检测他是否已连接。

我试过这段代码，但没有用：

async componentWillMount()
{
   if (!await NetInfo.isConnected)
   {
      this.props.navigation.navigate('Saved');
   }
}

有什么经过测试的解决方案可以推荐吗？

【问题讨论】：

Detect network connection in React Redux app - if offline, hide component from user的可能重复
@vahdet 你确定链接问题使用的浏览器 API 在 react-native 中可用吗？
在评论时，react 在标签中。不过，在某些情况下不删除可能对任何人都有帮助。谢谢！
这是一篇有趣的文章medium.com/@kulor/…，介绍了为什么 NetInfo 不是最好的方法。它解释说，当用户连接到付费墙后面的 WiFi 时，NetInfo 会报告用户已连接。文章提出了一个解决方案。

标签： javascript react-native

【解决方案1】：

试试await NetInfo.isConnected.fetch()

参考：https://facebook.github.io/react-native/docs/netinfo.html#isconnected

【讨论】：

等待：D，您的回答被接受，但有问题手机可能有来自 WIFI 的互联网连接或移动数据，您的解决方案适用于 WIFI，但如果手机是从 DATA 连接的“等待 NetInfo .isConnected.fetch()" 返回 false;
@27mdmo7sn 可能与android 上的ACCESS_NETWORK_STATE 权限有关。

【解决方案2】：

您可以使用NetInfo 进行检查。为此，您必须像这样添加connectionChange 事件监听器

componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange.bind(this));
        NetInfo.isConnected.fetch().done(
            (isConnected) => { this.setState({ isConnected: isConnected }); }
        );

然后移除componentWillUnmount中的事件监听器

componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
    }

最后是连接更改的处理程序方法。我将状态存储在设备本地存储中，您可以随心所欲。

handleConnectionChange = (isConnected) => {
        if (isConnected) {
            //ToastAndroid.show('Data sync in process...', ToastAndroid.SHORT);
            AsyncStorage.getItem('offlineData')
                .then((json) => JSON.parse(json))
                .then((data) => {
                    console.log(JSON.stringify(data));
                });
        }
        else { ToastAndroid.show('You are offline.', ToastAndroid.SHORT); }

        this.setState({ isConnected: isConnected });
    }

别忘了在react-native 中添加NetInfo :)

【讨论】：

【解决方案3】：

另一种解决方案（不使用 isConnected 属性）是直接使用从事件处理程序返回的对象，如下所示：

componentDidMount() {
  NetInfo.addEventListener('connectionChange', this.handleNetworkChange);
}

componentWillUnmount() {
  NetInfo.removeEventListener('connectionChange', this.handleNetworkChange);
}

handleNetworkChange = (info) => {
    if (info.type === 'none') {
      this.props.navigation.navigate('Saved');
    }
};

根据 NetInfo 文档：

connectionChange 事件在网络状态改变时触发。事件处理程序的参数是一个带有键的对象：

type：一个 ConnectionType（上面列出的）

effectiveType：一个 EffectiveConnectionType（上面列出的）

连接类型可以是以下之一：无、wifi、蜂窝、未知。

理想情况下，您可以将此信息存储到您的 redux 存储中，并将侦听器存储到根组件。

我们在使用 isConnected 时遇到了一个奇怪的错误，类似于您提到的@Gabriel Bleu，但对我们而言，NetInfo.isConnected.fetch() 仅在 Android 设备在一段时间不活动后唤醒时才返回 false。我们使用了它为用户显示离线警告，因此警告永远不会离开。我在 Spencer Carli 的课程中找到了这个解决方案，它似乎效果更好，但根据您的需要，您可能希望将 isConnected 与上述代码结合使用。

【讨论】：

【解决方案4】：

这是检查online 或offline 的一个很好的示例，甚至您也可以获得连接更改信息。 Source

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
     'connectionChange',
     handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

【讨论】：

【解决方案5】：

您的代码目前存在两个问题。

在较新版本的 react 生命周期方法 componentWillMount 已弃用。
较新版本的 react-native 已将 NetInfo 模块从核心中提取出来。请改用@react-native-community/netinfo。

为了实现所需的行为，您应该这样做。

import NetInfo from "@react-native-community/netinfo";

class CheckConnection extends Component {

    componentDidMount() {
        
        NetInfo.fetch().then(state => {
            handleConnectionState(state)
        }); 
        
    }
        
    handleConnectionState(state) {
        console.log("Connection type", state.type);
        console.log("Is connected?", state.isConnected);
        ... your code to handle the lack of connection
        
    }

}

【讨论】：