如何在React Native iOS中检查网络信息？

Question

我需要在React Native iOS中检查互联网连接。

我会尝试以下代码：

NetInfo.isConnected.fetch().then(isConnected => {
   console.log(isConnected);
});

在React Native Android应用程序中可以正常工作，但在React Native iOS应用程序中始终返回“false”。

- Saravana Kumar

Answer 1

目前在 react native的github 上有一个关于此问题的未解决问题。

你可以在那里看到讨论，简而言之 - fetch 总是返回false，但你可以通过监听连接更改事件来解决它。

代码示例：

componentDidMount() {
    NetInfo.isConnected.addEventListener('change', this.handleConnectionChange);

    NetInfo.isConnected.fetch().done(
      (isConnected) => { this.setState({ status: isConnected }); }
    );
}

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

handleConnectionChange = (isConnected) => {
        this.setState({ status: isConnected });
        console.log(`is connected: ${this.state.status}`);
}

编辑：

看起来这个问题已经得到了解决。 同时，change事件被重命名为connectionChange。更新的解决方法代码如下：

componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);

    NetInfo.isConnected.fetch().done(
      (isConnected) => { this.setState({ status: isConnected }); }
    );
}

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

handleConnectionChange = (isConnected) => {
        this.setState({ status: isConnected });
        console.log(`is connected: ${this.state.status}`);
}

更新:

change 事件类型已被弃用。请考虑使用 connectionChange 事件类型。

- Moti Azu

---

这可能已经很晚了，但是NetInfo的“change”事件被弃用了。请改为监听“connectionChange”事件。 - David

如果在组件卸载后调用setState，由于在isConnected.fetch promise解决之后，这种方法会导致警告。 - br4nnigan

Answer 2

通过使用this模块，您可以订阅网络状态更新

const unsubscribe = NetInfo.addEventListener(state => {
  console.log("Is connected?", state.isConnected);
});

同时，您还可以查找当前活动的网络连接是否可访问互联网。

console.log("Is Internet Reachable?", state.isInternetReachable);

我还解释了react-native-netinfo的用法和功能here，带有源代码。

- Mash