React Native断网检测实现咨询：代码报错，需断网弹窗提醒

你的代码问题主要在于使用了已废弃的NetInfo API，且逻辑仅处理单次网络状态检查/监听，无法持续响应网络变化。以下是正确的实现方式：

步骤1：安装依赖 #

React Native 0.60+ 已将NetInfo移至社区维护包，先完成安装：

npm install @react-native-community/netinfo
# 或使用yarn
yarn add @react-native-community/netinfo

步骤2：完整实现代码 #

import React, { Component } from 'react';
import { View, Alert } from 'react-native';
import NetInfo from '@react-native-community/netinfo';

class NetworkMonitor extends Component {
  componentDidMount() {
    // 应用启动时先检查一次当前网络状态
    this.checkInitialConnection();
    // 注册网络状态变化的持续监听
    this.unsubscribeListener = NetInfo.addEventListener(this.handleNetworkChange);
  }

  componentWillUnmount() {
    // 组件销毁时移除监听，避免内存泄漏
    if (this.unsubscribeListener) {
      this.unsubscribeListener();
    }
  }

  // 初始化网络状态检查
  checkInitialConnection = async () => {
    const networkState = await NetInfo.fetch();
    this.showConnectionTip(networkState.isConnected);
  };

  // 网络状态变化时的处理逻辑
  handleNetworkChange = (networkState) => {
    this.showConnectionTip(networkState.isConnected);
  };

  // 弹出网络状态提醒
  showConnectionTip = (isConnected) => {
    if (isConnected) {
      Alert.alert('网络恢复', '你当前处于在线状态');
    } else {
      Alert.alert('网络断开', '你当前处于离线状态');
    }
  };

  render() {
    return <View />;
  }
}

export default NetworkMonitor;

核心说明 #

• 无需区分iOS/Android平台，@react-native-community/netinfo的API已做跨平台兼容
• 通过addEventListener注册持续监听，组件销毁时必须移除监听，防止内存泄漏
• 初始化时主动检查一次网络状态，避免应用启动后错过初始状态
• 状态对象networkState还包含连接类型（如WiFi/蜂窝网络）、是否受限等细节，可按需扩展逻辑

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