react-native-netinfo的useNetInfo在网络重连后返回状态异常如何解决

版本与基础配置校验 #

• 确认你的 react-native-netinfo 版本不低于 v9.3.0，低于该版本的useNetInfo钩子存在已知的重连后状态不更新缺陷，建议先升级到最新稳定版。
• Android平台需检查AndroidManifest.xml中已添加完整权限：

<!-- 基础网络状态检测权限 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<!-- TargetSDK>=33时需额外添加 -->
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

• iOS平台若需要获取WiFi相关信息，需开启Xcode项目中Capabilities里的Access WiFi Information权限。

调整useNetInfo配置跳过缓存 #

默认的useNetInfo会缓存连通性检测结果，导致重连后状态没有及时更新，可传入自定义配置强制实时检测：

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

const netInfo = useNetInfo({
  // 自定义连通性检测地址，也可替换为你自己的后端服务地址
  reachabilityUrl: 'https://clients3.google.com/generate_204',
  reachabilityTest: async (response) => response.status === 204,
  // 强制跳过缓存，每次状态变化都运行连通性检测
  reachabilityShouldRun: () => true,
  // 超时时间可根据业务需求调整
  reachabilityShortTimeout: 5 * 1000,
  reachabilityRequestTimeout: 15 * 1000,
});

主动刷新状态的备选实现 #

如果配置修改后仍存在问题，可手动监听网络事件并主动调用刷新方法拉取最新状态：

import { useEffect, useState } from 'react';
import NetInfo from '@react-native-community/netinfo';

const useCustomNetInfo = () => {
  const [netState, setNetState] = useState(null);

  useEffect(() => {
    // 初始化拉取一次状态
    NetInfo.refresh().then(setNetState);
    
    const unsubscribe = NetInfo.addEventListener(() => {
      // 每次系统通知网络变化时主动刷新状态，绕过钩子的缓存逻辑
      NetInfo.refresh().then(freshState => {
        setNetState(freshState);
      });
    });

    return () => unsubscribe();
  }, []);

  return netState;
};

特殊场景适配 #

• 部分定制Android ROM会限制App后台获取网络状态的权限，可引导用户手动开启App的「后台网络访问」「网络状态获取」权限。
• iOS 14+设备开启本地网络限制后会出现状态检测延迟，可引导用户在系统设置中开放App的本地网络权限。

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