如何在Ionic React应用中检测网络连接状态

前置依赖安装 #

• 首先安装Capacitor官方的Network插件，该插件跨框架支持Angular、React、Vue等所有Ionic兼容框架：
  执行安装命令：npm install @capacitor/network
• 安装完成后同步原生工程配置：npx cap sync

功能代码实现 #

你可以直接封装成独立的React组件或自定义Hook，以下是函数组件实现示例：

// 导入依赖
import { Network } from '@capacitor/network';
import { useState, useEffect } from 'react';

const NetworkStatusMonitor = () => {
  // 存储网络是否连接
  const [isOnline, setIsOnline] = useState(false);
  // 存储网络类型：wifi/cellular/unknown/none
  const [networkType, setNetworkType] = useState('unknown');

  // 初始化获取当前网络状态
  const loadNetworkStatus = async () => {
    const status = await Network.getStatus();
    setIsOnline(status.connected);
    setNetworkType(status.connectionType);
  };

  useEffect(() => {
    // 组件挂载时获取初始状态
    loadNetworkStatus();

    // 注册网络状态变化监听
    const listener = Network.addListener('networkStatusChange', (status) => {
      setIsOnline(status.connected);
      setNetworkType(status.connectionType);
      // 可在这里添加网络变化后的业务逻辑，比如离线提示、断网缓存等
    });

    // 组件卸载时移除监听，避免内存泄漏
    return () => listener.remove();
  }, []);

  // 业务UI渲染，可根据需求自定义
  return (
    <>
      {!isOnline && <div style={{color: 'red', padding: '8px'}}>当前无网络连接，请检查网络设置</div>}
      <p>当前网络类型：{networkType}</p>
    </>
  );
};

export default NetworkStatusMonitor;

额外配置与注意事项 #

• Android端需要添加网络状态访问权限，在android/app/src/main/AndroidManifest.xml中添加如下配置：

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  

• iOS端无需额外权限配置，直接可用
• 默认的网络状态检测仅判断设备是否接入了网络，如果你需要确认是否可以正常访问公网，可以在拿到isOnline=true的状态后，额外调用一次你的业务服务端的心跳接口做校验，避免接入了无互联网访问权限的局域网的误判问题
• 该方案同时兼容Web、iOS、Android三端，Web端会自动适配浏览器的网络状态API

内容的提问来源于stack exchange，提问作者Timothy Cuenat