React Native的NetInfo在iOS和Android端行为差异问题求助

你的代码存在三个核心问题导致Android端无法触发网络恢复后的弹窗逻辑：

1. 初始网络监听写在启动页的useEffect中，启动页跳转其他页面销毁时，useEffect返回的清理函数会将监听移除，后续网络状态变化没有有效监听接收回调。iOS端因为库的底层实现差异，存在临时回调缓存所以能触发，Android端无该机制所以无法响应。
2. reCheckNet函数中重复调用NetInfo.addEventListener注册新的监听，既没有清理旧监听，闭包问题也会导致状态更新异常，Android端对重复注册的未托管监听会自动拦截，所以不会触发回调。
3. 部分Android版本缺少必要的权限配置，无法捕获网络状态变化广播。

步骤1：补充Android端基础权限配置 #

修改android/app/src/main/AndroidManifest.xml，添加以下权限：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- targetSdkVersion >= 33 可添加以下权限提升检测精度 -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

步骤2：重构网络监听逻辑，全局唯一注册 #

不要在单页面中注册监听，将监听逻辑放在全局入口（比如App.js），用变量托管取消函数，避免重复注册/意外销毁：

// 全局存储网络监听取消函数，避免重复注册
let netInfoUnsubscribe = null;

// 入口组件的useEffect中只注册一次监听
useEffect(() => {
  netInfoUnsubscribe = NetInfo.addEventListener((state) => {
    console.log("网络状态变更：", state.isConnected);
    if (!state.isConnected) {
      setShowModal("internet");
    } else {
      // 网络恢复时自动处理弹窗和重启逻辑
      if (showModal === "internet") {
        setShowModal("");
        RNRestart.Restart();
      }
    }
  });

  // 仅整个应用销毁时才清理监听
  return () => {
    netInfoUnsubscribe?.();
  };
}, [showModal]); // 添加showModal作为依赖，避免闭包导致的状态更新失效

步骤3：简化reCheckNet逻辑，移除重复监听注册 #

const reCheckNet = async () => {
  const data = await NetInfo.fetch();
  if (data.isConnected) {
    setShowModal("");
    RNRestart.Restart();
  }
  // 无网络场景无需额外处理，全局监听会在网络恢复时自动触发
};

可选优化：调整NetInfo检测配置 #

如果Android端网络状态检测有延迟，可在应用启动时调用configure调整检测参数：

NetInfo.configure({
  reachabilityUrl: 'https://clients3.google.com/generate_204',
  reachabilityTest: async (response) => response.status === 204,
  reachabilityShortTimeout: 5 * 1000,
  reachabilityRequestTimeout: 15 * 1000,
});

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