2

我试过@react-native-community/netinfo 来检查互联网的可达性。但我要实现的场景是，假设我的设备从另一台设备连接到 wifi 热点，并且如果该设备的移动数据已关闭，我想显示离线 toast。

componentDidMount() {
 NetInfo.addEventListener(status => {
  this.props.checkOnlineStatus(
    status.isConnected,
    status.isInternetReachable
  );
  this.setState({
    isConnected: status.isConnected,
    isInternetReachable: status.isInternetReachable
  });
 });
}

render() {
 if (!this.state.isInternetReachable && this.props.isOfflineNoticeVisible) {
  return <MiniOfflineSign />;
 }
 return null;
}

但在这种情况下，当其他设备的移动数据关闭时，它不会处理更改。

4

3 回答 3

2

这些连接类型可能会有所帮助：https ://github.com/react-native-community/react-native-netinfo#netinfostatetype

除此以外：

然后可以肯定的是，您在线只需实现一个超时提取：

 export default function(url, options, timeout = 5000) {
      return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject("timeout"), timeout)),
      ]);
    }

然后像这样使用它：

fetchWithTimeout(url, options)
        .then(resp => {
          if (resp.status === 200) {
            let json = resp.json().then(j => {
              return j;
            });
        })
        .catch(ex => {
          // HANDLE offline usage
          if (ex === "timeout") return true;
          //ANY OTHER CASE RETURN FALSE
          return false;
}
于 2019-08-20T09:44:26.713 回答
2

使用包的非弃用方式（使用功能组件）@react-native-community/netinfo现在是：

import React, { useEffect } from "react";
import NetInfo from "@react-native-community/netinfo";

  useEffect(() => {
    return NetInfo.addEventListener(state => {
      // use state.isInternetReachable or some other field
      // I used a useState hook to store the result for use elsewhere
    });
  }, []);

这将在状态更改时运行回调，并在组件卸载时取消订阅。

于 2021-10-05T01:48:51.740 回答
1 

async function InternetCheck() {
    const connectionInfo = await NetInfo.getConnectionInfo();
    if (connectionInfo.type === 'none') {
        alert('PLEASE CONNECT TO INTERNET');
    } else {
            //navigate to page or Call API
    }
}

于 2019-08-20T09:35:43.463 回答