如何在iOS和Android的React本机应用程序中检查internet连接？

我有一个React本机应用程序，我正在寻求添加功能，在应用程序首次启动时检查是否存在活动的internet连接，并在启动后持续进行

如果没有internet连接，我试图显示一条消息，说“未检测到internet连接”，并按“重试”按钮；如果有internet连接，我会尝试加载一个页面（WebView）

我还寻求同时支持iOS和Android设备；我已经独立地对此进行了研究，并在GitHub上找到了几个库。然而，许多人需要在Android清单XML中添加额外的权限，但是我在我的应用程序中没有看到Android清单XML文件；为什么只有Android需要清单

感谢您的帮助；谢谢，小心点。

请阅读此链接

import React，{Component}来自“React”；
从“react native”导入{视图、文本、按钮、警报、NetInfo、平台}；
导出默认类componentName扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
检查连通性=（）=>{
//适用于Android设备
如果（Platform.OS==“android”）{
NetInfo.isConnected.fetch（）。然后（isConnected=>{
如果（未连接）{
警惕。警惕（“你在线了！”）；
}否则{
警惕。警惕（“你离线了！”）；
}
});
}否则{
//用于iOS设备
NetInfo.isConnected.addEventListener(
“连接更改”，
此.handleFirstConnectivityChange
);
}
};
handleFirstConnectivityChange=isConnected=>{
NetInfo.isConnected.removeEventListener(
“连接更改”，
此.handleFirstConnectivityChange
);
如果（断开连接===错误）{
警惕。警惕（“你离线了！”）；
}否则{
警惕。警惕（“你在线了！”）；
}
};
render（）{
返回(
this.CheckConnectivity（）}
title=“检查互联网连接”
color=“#841584”
accessibilityLabel=“了解有关此紫色按钮的详细信息”
/>
);
}
}

为此，请提供一个名为netinfo的库：请查看：

它提供了一个api来检查连接及其类型

---

注意：如果您正在使用RN<0.60:

NetInfo已从React Native中删除。现在可以从“react native netinfo”而不是从“react native”安装和导入它。

---

请看

我今天遇到了这个问题，并找到了我认为是最好的解决方案。 它将不断搜索网络变化并相应地显示它们

我用expo install@react native community/netinfo对它进行了测试，它的工作状态完美无瑕

import {useNetInfo} from "@react-native-community/netinfo";

const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
    </View>
  );
};

从“@react native community/netinfo”导入{useNetInfo}”；
constyourcomponent=（）=>{
const netInfo=useneinfo（）；
返回(
类型：{netInfo.Type}
是否已连接？{netInfo.isConnected.toString（）}
);
};

Android清单文件如下： \android\app\src\main\AndroidManifest.xml。 进一步使用此库来满足您的需要

---

创建NetworkUtills.js

import NetInfo from "@react-native-community/netinfo";
export default class NetworkUtils {
  static async isNetworkAvailable() {
    const response = await NetInfo.fetch();
    return response.isConnected;
}}

在这样的地方使用

const isConnected = await NetworkUtils.isNetworkAvailable()

---

似乎这个问题已经解决了，似乎没有人考虑其他现有的答案

您应该使用“@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();

---

在我看来，检查更新更改的正确且简单的方法如中所述。还可以查看更多信息，比如isConnected和isinternetreachable之间的区别，这很有帮助；但是，如何在没有按钮的情况下持续检查internet连接（如果internet连接状态发生更改，则触发操作）？这是连接更改的回调

NetInfo.isConnected.addEventListener（“connectionChange”，this.handleFirstConnectionyChange）

handleFirstConnectivityChange=isConnected=>{//NetInfo.isConnected.removeEventListener（“connectionChange”，this.handleFirstConnectivityChange）；if（isConnected==false）{Alert.Alert（“您脱机！”）；}else{Alert.Alert（“您联机！”；}好；但是，当ConnectionChangeInfo不再是react本机项目的一部分时调用handleFirstConnectivityChange（）方法时，该代码会去哪里（是否在handleFirstConnectivityChange方法中？）。它从核心分离出来。您可以使用此示例->这不是问题@nsa的答案抱歉，我通过提供新信息完成了第一个答案：）
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();