React Native如何检测网络质量(差/一般/好)并展示对应WiFi状态图标

参考WiFi状态示例图：

实现前提 #

你已完成依赖安装：

• 网络状态依赖：@react-native-community/netinfo@5.9.10
• 网速检测依赖：react-native-network-speed@1.1.2
  已准备好无网络、低速、良好三种状态的WiFi图标资源。

核心实现逻辑 #

1. 定义状态阈值 #

根据业务需求自定义网速分界值，参考示例：

• 无网络：NetInfo检测到设备未连接网络
• 低速：实时下行网速 < 100kb/s
• 良好：实时下行网速 ≥ 100kb/s
  阈值可根据实际场景调整。

2. 状态监听与映射代码实现 #

import React, { useState, useEffect } from 'react';
import NetInfo from "@react-native-community/netinfo";
import NetworkSpeed from 'react-native-network-speed';
import { Image } from 'react-native';

// 提前引入三种状态的WiFi图标资源，路径按实际调整
const WIFI_ICON_MAP = {
  none: require('./assets/wifi_none.png'),
  low: require('./assets/wifi_low.png'),
  good: require('./assets/wifi_good.png')
};

const WifiStatusIndicator = () => {
  const [currentStatus, setCurrentStatus] = useState('none');
  // 低速阈值，单位kb/s，可自行修改
  const LOW_SPEED_THRESHOLD = 100;

  useEffect(() => {
    // 监听网络连接状态，优先判断是否断网
    const unsubscribeNetInfo = NetInfo.addEventListener(networkState => {
      if (!networkState.isConnected) {
        setCurrentStatus('none');
        return;
      }
      // 已连接网络时，启动网速监听
      NetworkSpeed.startListenDownloadSpeed(speedStr => {
        // 从返回的速度字符串中提取数值，例如把"22kb/s"转为数字22
        const speedValue = parseInt(speedStr.replace(/[^0-9]/g, ''));
        // 根据数值匹配对应状态
        setCurrentStatus(speedValue < LOW_SPEED_THRESHOLD ? 'low' : 'good');
      });
    });

    // 组件卸载时清除监听，避免内存泄漏
    return () => {
      unsubscribeNetInfo();
      NetworkSpeed.stopListenDownloadSpeed();
    };
  }, []);

  return <Image source={WIFI_ICON_MAP[currentStatus]} style={{ width: 24, height: 24 }} />;
};

export default WifiStatusIndicator;

注意事项 #

• 如果react-native-network-speed在你的RN版本中存在兼容问题，可以替换为自行实现的测速逻辑：定期请求一个小体积的静态资源，通过请求耗时计算实时下行速度，兼容性更强
• 可以添加防抖逻辑，避免网速跳变导致图标频繁切换，比如连续3次检测到符合某一状态再切换图标
• 若需要同时统计上行速度，可调用react-native-network-speed对应的上行速度监听方法

内容的提问来源于stack exchange，提问作者tes krmtstk4