React Native中如何检测网络稳定性与质量？

NetInfo只能判断设备是否连接到本地网络（比如WiFi、蜂窝数据），但没法验证是否真的能访问互联网，更没法评估网络质量。针对你的需求，这里有几个实用方案：

1. 主动验证互联网连通性 #

通过向可靠的服务器发送轻量请求来确认是否能上网。推荐用低延迟的公共服务接口（比如谷歌的generate_204无内容接口）或者你自己的后端健康检查接口，这类请求体积小、响应快。

示例代码：

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

// 检测是否能访问互联网
const checkInternetAccess = async () => {
  try {
    const response = await fetch('https://www.google.com/generate_204', {
      method: 'HEAD',
      timeout: 5000, // 5秒超时
    });
    return response.ok; // 状态码200-299则返回true
  } catch (error) {
    return false;
  }
};

用HEAD请求比GET更高效，因为只返回响应头，不用下载内容。

2. 评估网络质量 #

通过多次请求的响应时间、成功率来判断网络稳定性：

• 记录每次请求的响应时间，平均时间超过阈值（比如1000ms）则判定为质量差
• 连续多次请求失败，判定为网络中断
• 统计一段时间内的请求成功率，低于阈值则提示用户

示例：

// 检测网络质量
const checkNetworkQuality = async () => {
  const startTime = Date.now();
  try {
    await fetch('https://www.google.com/generate_204', { timeout: 5000 });
    const responseTime = Date.now() - startTime;
    
    if (responseTime < 500) {
      return 'good'; // 优质网络
    } else if (responseTime < 1500) {
      return 'moderate'; // 一般网络
    } else {
      return 'poor'; // 差网络
    }
  } catch (error) {
    return 'offline'; // 无互联网
  }
};

3. 结合NetInfo实现实时监听 #

用NetInfo监听网络状态变化，当设备从离线变在线时，立刻触发连通性检测；之后定期（比如30秒）检测一次，避免频繁请求：

import { useEffect, useState } from 'react';

const useNetworkQuality = () => {
  const [quality, setQuality] = useState('unknown');

  useEffect(() => {
    // 初始检测
    const initialCheck = async () => {
      const result = await checkNetworkQuality();
      setQuality(result);
    };
    initialCheck();

    // 监听网络状态变化
    const unsubscribe = NetInfo.addEventListener(state => {
      if (state.isConnected) {
        checkNetworkQuality().then(setQuality);
      } else {
        setQuality('offline');
      }
    });

    // 定期检测
    const interval = setInterval(() => {
      checkNetworkQuality().then(setQuality);
    }, 30000); // 30秒一次

    return () => {
      unsubscribe();
      clearInterval(interval);
    };
  }, []);

  return quality;
};

// 在组件中使用
const App = () => {
  const networkQuality = useNetworkQuality();

  return (
    <View>
      {networkQuality === 'poor' && <Text>当前网络不稳定，请检查连接</Text>}
      {networkQuality === 'offline' && <Text>无法访问互联网</Text>}
    </View>
  );
};

4. 处理特殊场景 #

• 公共WiFi需要登录：这类场景下请求会返回3xx跳转或200但内容是登录页，你可以检查响应的Content-Type或者内容是否包含特定关键字，来判断是否需要引导用户登录WiFi。
• 蜂窝数据限速：可以通过检测多次请求的平均速度，结合运营商信息（需额外库支持）来提示用户。

内容的提问来源于stack exchange，提问作者Hamza Hmem