React Native中NetInfo.addEventListener网络重连时未触发的问题排查

我来帮你搞定这个问题！你的离线弹窗在断网时正常工作，但恢复网络后没反应，主要是几个小细节没处理到位，咱们一步步来解决：

问题根源分析 #

1. 监听器未清理导致异常：你的useEffect没有返回清理函数移除NetInfo监听器，这会导致组件挂载后监听器可能出现残留或异常，无法正确响应后续网络状态变化。
2. isInternetReachable的滞后性：这个属性是判断设备能否访问互联网，它的更新往往比isConnected（判断是否有物理网络连接）慢，尤其是模拟器环境下，网络恢复时这个值可能不会立即同步。
3. 初始状态设置不合理：默认把isConnected设为false，如果用户初始是联网状态没问题，但一旦断网后恢复，监听器没触发的话状态就会一直停在false。

修复后的完整代码 #

下面是调整后的代码，解决了上述问题，同时优化了状态逻辑：

import React, { useState, useEffect } from 'react';
import { Dimensions, View, Text } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import * as Animatable from 'react-native-animatable';

export default function InternetCheck() {
  const APP_NAME = 'Security App';
  // 初始设为null，等待初始网络状态获取完成再渲染弹窗
  const [isConnected, setIsConnected] = useState(null);

  useEffect(() => {
    // 统一处理网络状态变化的回调
    const handleNetworkChange = (state) => {
      console.warn('网络状态更新:', state);
      // 优先用isConnected判断物理连接，再回退到isInternetReachable判断互联网可达性
      const currentConnected = state.isConnected ?? state.isInternetReachable;
      setIsConnected(currentConnected);
    };

    // 订阅网络状态变化，并保存取消订阅的函数
    const unsubscribe = NetInfo.addEventListener(handleNetworkChange);

    // 初始获取网络状态
    NetInfo.fetch().then(state => {
      const initialConnected = state.isConnected ?? state.isInternetReachable;
      setIsConnected(initialConnected);
    });

    // 组件卸载时清理监听器，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 初始状态未获取时，不渲染任何弹窗
  if (isConnected === null) return null;

  return (
    <>
      {!isConnected && (
        <Animatable.View
          style={{
            backgroundColor: 'red',
            position: 'absolute',
            zIndex: 2,
            top: 30,
            width: Dimensions.get('window').width / 1.5,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
            alignSelf: 'center',
            borderRadius: 50,
          }}
          animation="fadeInDown">
          <Text
            style={{
              color: '#fff',
              textAlign: 'center',
              fontWeight: '700',
            }}>
            * WARNING You are Currently OFFLINE - Please reconnect to use this app's features.
          </Text>
        </Animatable.View>
      )}
      {isConnected && (
        <Animatable.View
          style={{
            backgroundColor: 'green',
            position: 'absolute',
            zIndex: 2,
            top: 30,
            width: Dimensions.get('window').width / 1.5,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
            alignSelf: 'center',
            borderRadius: 50,
          }}
          animation="fadeOutUp"
          duration={5000}
          delay={2000}>
          <Text
            style={{
              color: '#fff',
              textAlign: 'center',
              fontWeight: '700',
            }}>
            You're back online!
          </Text>
        </Animatable.View>
      )}
    </>
  );
}

额外注意事项 #

• 模拟器测试技巧：部分模拟器的网络状态触发不够灵敏，比如iOS模拟器，你可以尝试重启模拟器的Wi-Fi/蜂窝数据开关，或者直接用真机测试，真机的状态捕捉会更准确。
• 更新NetInfo版本：确保你使用的@react-native-community/netinfo是最新版，旧版本可能存在状态更新的已知bug，执行npm update @react-native-community/netinfo即可更新。
• 弱网络扩展思路：后续要做弱网络检测的话，可以利用state.details.effectiveType属性，判断当前网络是2g/3g/4g/wifi，再针对性显示弱网络提示。

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