logo标签列表

如何在React Native应用程序中检查iOS和Android的网络连接？

androidiosreact-nativepermissions
66

我有一个React Native应用程序，希望添加一个功能，在应用程序启动时以及之后持续检查是否存在活动的互联网连接。

如果没有互联网连接，我希望显示一条消息，上面写着“未检测到互联网连接”，并提供一个“重试”按钮；如果有互联网连接，我希望加载一个页面（WebView）。

我还希望支持iOS和Android设备；我已经独立进行了研究，并在GitHub上找到了几个库。然而，许多库需要在Android清单XML中包含权限附加项，但我在我的应用程序中没有看到Android Manifest XML文件；为什么只有Android需要一个清单？

非常感谢您的帮助；谢谢，保重。

1
我认为获取有关更改的正确和简单方法在https://github.com/react-native-community/react-native-netinfo#usage中有所描述。此外，还可以查看https://github.com/react-native-community/react-native-netinfo#netinfostate以获取更多信息，例如isConnected和isInternetReachable之间的区别。 - Yossi
15个回答
1
import NetInfo from "@react-native-community/netinfo";

useEffect(() => {
const removeNetInfoSubscription = NetInfo.addEventListener((state)={

const offline = !(state.isConnected && state.isInternetReachable);

console.log(offline);

});

return () => removeNetInfoSubscription();
}, []);
1

对于展览：

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

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

请查看此文档：https://docs.expo.dev/versions/latest/sdk/netinfo/

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

 const netInfo = useNetInfo();

  const [visible, setVisible] = useState(true)

  useEffect(() => {
    setVisible(!netInfo?.isConnected )
  }, [])
  

  useEffect(() => {
    setVisible(true)

    setTimeout(() => {
      if(netInfo?.isConnected ){
        setVisible(false)
      }
    }, 2000);

  }, [netInfo?.isConnected])

 {visible &&
      <Text style={{ marginTop:20,
              backgroundColor:netInfo?.isConnected ? "green":'red',
              paddingVertical:30, textAlign:'center',
              fontWeight:'bold', fontSize:18}}>
             {netInfo?.isConnected? "back online" : "Could not connect to the internet..." }
      </Text>
      }

enter image description here

在此输入图像描述 检查在线离线的互联网连接

0
0
安装expo-network库
$ npx expo install expo-network

将库添加如下，并进行适当的检查。
import * as Network from 'expo-network';
...
const netStatus = await Network.getNetworkStateAsync();
if (!netStatus.isConnected) {
    // do something here
}

更多信息可以在Expo的文档中找到这里。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接