react-native - 如何在 react-native 应用程序中检查网络状态

Question

我正在为这一点苦苦挣扎，如果在我的手机中我的网络连接不佳，我如何调用该服务，调用该服务将需要更多时间

• 是否有可能增加获取超时（或）

• 如何告诉用户您的互联网连接不佳。

  为了检查互联网连接，我使用了networkInfo，但它仅有助于连接是否存在，但它没有提供有关网络速度的任何信息。

如果可能的话，任何人都可以给我建议，我该如何解决这个问题，非常感谢任何帮助我正在使用react-native 版本：0.29.0

Answer 1

如果您只想知道设备是否有活动的互联网连接，您可以使用例如来自 React Native 的NetInfo的isConnected：

import { NetInfo } from "react-native";

NetInfo.isConnected.addEventListener(
  "connectionChange",
  hasInternetConnection =>
    console.debug("hasInternetConnection:", hasInternetConnection)
);

但是我不确定如何找出连接的好坏。

Answer 2

NetInfo.getConnectionInfo().then((connectionInfo) => {
  console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: '    + connectionInfo.effectiveType);
});
function handleFirstConnectivityChange(connectionInfo) {
  console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
  NetInfo.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

这是 react-native文档中代码的副本，有效类型指定网络是 2G、3G、EDGE 还是 4G。

Answer 3

在 react native 0.60 中，直接从 react native 包中导入 netinfo 已被弃用。您必须使用import NetInfo from "@react-native-community/netinfo"；在顶部，它是一个不同的包，需要链接到本机代码。之后，您可以使用之前使用的 NetInfo 函数，例如

NetInfo.isConnected.addEventListener(
  "connectionChange",
  hasInternetConnection =>
    console.debug("hasInternetConnection:", hasInternetConnection)
);

请查看 Github 文档以获取相同的React 本机网络信息

Answer 4

这个问题在stackoverflow上的很多地方都被引用过。对于较新版本的 react native，您应该使用“@react-native-community/netinfo”库。NetInfo 曾经是 react-native 的一部分，但后来它从核心中分离出来。如果您想观察网络状态的变化，只需使用提供的 addEventListener 方法。

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

NetInfo.fetch().then(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
});

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

// Unsubscribe
unsubscribe();

Answer 5

您可以使用名为 react-native-offline 的模块

以下是那里网站上给出的道具

**

type Props = {
    children: React.Node,
    pingTimeout?: number = 10000,
    pingServerUrl?: string = 'https://www.google.com/',
    shouldPing?: boolean = true,
    pingInterval?: number = 0,
    pingOnlyIfOffline?: boolean = false,
    pingInBackground?: boolean = false,
    httpMethod?: HTTPMethod = 'HEAD',
}

**

Answer 6

这是示例：

import { NetInfo,Alert } from 'react-native';

const netStatus = await NetInfo.fetch()  

if (netStatus === 'none' || netStatus === 'NONE') {
    Alert.alert("Internet not connected.!!!")
    return []
}else{ 
    Alert.alert("Internet connected.!!! ")
}

Answer 7

您可以使用expo-network

1. 安装包

   expo install expo-network
   

2. 你可以做下一个方法

   const [isConnected, setIsConnected] = useState(false);
   
   const getNetworkStatus = async () => {
       const network = await Network.getNetworkStateAsync();
       console.log(network.isConnected); //true or false
       setIsConnected(network.isConnected);
   }
   
   useEffect(() => {  
        //call the method
        getNetworkStatus();
   }, []);
   .
   .
   .
   if(isConnected == true){
       console.log("Connected!");
   }else{
       console.log("Not connected");
   }
   

您可以阅读 de文档