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

React Native 中的 NetInfo 模块的 addEventListener() 用于注册一个网络变更事件监听器。

语法

// 回调函数
function handleFirstConnectivityChange(connectionInfo) {
    console.log(
      'First change, type: ' +
        connectionInfo.type +
        ', effectiveType: ' +
        connectionInfo.effectiveType,
    );
}

// 添加
NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);

//移除
NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange);

导入模块

import { NetInfo } from 'react-native'

或者

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

方法说明

原型	平台	说明
`static addEventListener(eventName, handler)`	Android,iOS	注册一个网络变更事件监听器

参数说明

参数	类型	是否必传	说明
eventName	enum(connectionChange,change)	是	要监听的事件名称，一般为 `'connectionChange'`
handler	function	是	监听函数

支持的注册事件

NetInfo.addEventListener(eventName, handler) 方法支持的事件有：

connectionChange

当联网状态改变时触发

传给监听函数的参数是一个对象，包含有下列属性：
- type - NetInfo 所列出的 ConnectionType 值
- effectiveType - NetInfo 所列出的 EffectiveConnectionType 值
change

注意

这一事件已过期。请使用 connectionChange 代替。

当联网状态改变时触发

范例

下面的范例，使用 NetInfo 模块的 addEventListener() 方法添加一个网络变更事件监听器

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

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      connectionInfo:{
        type:'none',
        effectiveType:'ethernet'
      }
    }

    // 添加
    NetInfo.addEventListener('connectionChange', this.handleFirstConnectivityChange.bind(this));

    var that = this;
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      that.setState({connectionInfo})
    });
  }

  // 回调函数
  handleFirstConnectivityChange(connectionInfo) {
    this.setState({connectionInfo})

    //移除
    NetInfo.removeEventListener('connectionChange',this.handleFirstConnectivityChange.bind(this));
  }

  render() {

    const {connectionInfo} = this.state

    return (
      <View>
          <Text>当前的网络类型是： {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
          <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}