React Native 中的 NetInfo 模块用于可以获取设备当前的网络状态： 有网络( online ) 或者 无网络 ( offline )

已废弃. 请使用 react-native-community/react-native-netinfo 代替。

react-native-community/react-native-netinfo 模块和 NetInfo 模块其实一模一样，使用方式也一样。

因为 react-native-community/react-native-netinfo 模块只是将 NetInfo 模块移出了 React Native 核心模块，然后放到了 react-native-community 里面而已

安装 react-native-community/react-native-netinfo 模块

yarn

yarn add @react-native-community/netinfo

npm

npm install --save @react-native-community/netinfo

安装完成后还需要 连接

react-native link @react-native-community/netinfo

导入模块

import { NetInfo } from 'react-native'

或者

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

使用方式

NetInfo 模块的使用方式有两种

1. 直接获取设备当前网络状态：

   调用 NetInfo.getConnectionInfo() 获取设备的当前网络状态

   NetInfo.getConnectionInfo().then((connectionInfo) => {
     console.log(
       'Initial, type: ' +
         connectionInfo.type +
         ', effectiveType: ' +
         connectionInfo.effectiveType,
     );
   });
   

2. 注册网络状态变更监听器

   1. 先实现一个函数用于处理网络变更回调

      function handleFirstConnectivityChange(connectionInfo) {
          console.log(
            'First change, type: ' +
              connectionInfo.type +
              ', effectiveType: ' +
              connectionInfo.effectiveType,
          );
      }
      

   2. 然后注册监听回调

      就是把回调函数绑定到 connectionChange 事件上

      NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);
      

   3. 如果不需要继续监听，则可以随时取消监听器

      NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange,);
      

一般情况下，我们会先 注册监听器 来监听网络变更，然后调用 NetInfo.getConnectionInfo() 获取设备的当前网络状态

connectionInfo 参数

从上面的使用范例来看，不管是 直接获取设备网络状态 或者 注册监听器 都会返回一个 connectionInfo 参数

这个 connectionInfo 参数有两个属性

1. connectionInfo.type， 一个枚举值，枚举类型为 ConnectionType
2. connectionInfo.effectiveType，还是一个枚举值，枚举类型为 EffectiveConnectionType

ConnectionType 枚举

ConnectionType 枚举描述了设备的当前联网方式。

下面的枚举值是 跨平台 的，在 iOS 和 Android 上都可以使用

• none - 设备当前处于离线状态 （ 也就是无网络 ）
• wifi - 设备通过 wifi 联网，或者设备是 iOS 模拟器
• cellular - 设备通过蜂窝数据流量联网，也就是 Edge， 3G，WiMax，或 LTE
• unknown - 联网状态异常，可能是出错了，或者网络状态不可知

除此之外，Android 设备还有几个独有的状态

推荐不要使用，毕竟会破坏 React Native 的跨平台性

• bluetooth - 设备通过蓝牙协议联网 ( BlueTooth )
• ethernet - 设备通过以太网协议联网 ( Ethernet )
• wimax - 设备通过 WiMAX 协议联网

EffectiveConnectionType 枚举

下面的 EffectiveConnectionType 枚举值是 跨平台 的，在 iOS 和 Android 上都可以使用

• 2g
• 3g
• 4g
• unknown

Android

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

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

NetInfo 模块的方法

NetInfo 模块的属性

范例 1

下面的范例，使用 NetInfo 模块的 getConnectionInfo() 方法立即获取当前的网络状态

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'
      }
    }

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

  render() {

    const {connectionInfo} = this.state

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

范例 2

下面的范例，使用 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>
    );
  }
}