NetInfo 模块的 isConnected 属性的 addEventListener() 方法 - React Native 中文文档

React Native 中的 NetInfo 模块的 isConnected 属性的 addEventListener() 方法用于注册一个监听器，当网络状态 ( 'online' 或 'offline' ）变更时会回调该监听器。

Android

要在 Android 上获取联网状态，还需要在 AndroidManifest.xml 中添加如下权限请求

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

使用方式

function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
}


NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

导入模块

import { NetInfo } from 'react-native'

或者

import NetInfo from "@react-native-community/netinfo";

原型

原型	平台	说明
static addEventListener(eventName,handler)	Android,iOS	用于注册一个监听器，当网络状态 ( `'online'` 或 `'offline'` ）变更时会回调该监听器

参数说明

参数	说明
eventName	要监听的事件，一般为 `connectionChange`
handler	网络状态变更时的处理函数

返回值

NetInfo.isConnected.addEventListener() 有返回值，返回的是一个对象，包含一个 remove() 方法，可以用于移除该事件监听器

function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
}


var rs = NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

// 其它逻辑

// 移除事件监听器
rs.remove()

范例

下面的范例，使用 NetInfo 模块的 isConnected 属性的 addEventListener() 方法注册一个监听器，用于处理网络状态：'online' or 'offline' 变更时的回调

import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      isConnected: 'offline'
    }

    var that = this;

    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange.bind(this)
    );

    NetInfo.isConnected.fetch().then(isConnected => {
        that.setState({isConnected})
    });
  }


  handleFirstConnectivityChange(isConnected) {
    this.setState(isConnected)
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange.bind(this)
    );
  }

  render() {

    const {isConnected} = this.state

    return (
      <View>
          <Text>当前的网络状态是： {isConnected ? '有网络' : '无网络' } </Text>
          <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}