ReactNative判断网络状态

NetInfo
使用React Native，可以使用NetInfo API获取手机当前的各个网络状态。
官网文档：https://reactnative.cn/docs/0.51/netinfo.html#content

NetInfo模块可以获知设备联网或离线的状态信息

componentWillMount() {
      NetInfo.fetch().done((status)=> {
          console.log('Status:'+status);
      });
}

获取网络状态是异步的,上面使用了Promise机制。

Android端网络状态
请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段，申请相关权限：

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

image.png

Android的联网类型：

NONE - 设备处于离线状态
BLUETOOTH - 蓝牙数据连接
DUMMY - 模拟数据连接
ETHERNET - 以太网数据连接
MOBILE - 移动网络数据连接
MOBILE_DUN - 拨号移动网络数据连接
MOBILE_HIPRI - 高优先级移动网络数据连接
MOBILE_MMS - 彩信移动网络数据连接
MOBILE_SUPL - 安全用户面定位（SUPL）数据连接
VPN - 虚拟网络连接。需要Android5.0以上
WIFI - WIFI数据连接
WIMAX - WiMAX数据连接
UNKNOWN - 未知数据连接

IOS端网络状态
none - 设备处于离线状态。
wifi - 设备处于联网状态且通过wifi链接，或者是一个iOS的模拟器。
cell - 设备是通过Edge、3G、WiMax或是LTE网络联网的。
unknown - 发生错误，网络状况不可知

监听网络改变事件
在获取了网络状态后，开发者还可以通过NetInfo API提供的监听器，监听网络状态改变事件。这样当手机网络状态改变时，React Native应用马上收到通知。

componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:' + status);
        });
        //监听网络状态改变
        NetInfo.addEventListener('change', this.handleConnectivityChange);

    }

    componentWillUnMount() {
        console.log("componentWillUnMount");
        NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

    handleConnectivityChange(status) {
        console.log('status change:' + status);
        //监听第一次改变后, 可以取消监听.或者在componentUnmount中取消监听
       // NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

判断是否有网络连接
NetInfo API 为开发者提供了isConnected函数用来判断当前手机是否有网络连接。

NetInfo.isConnected.fetch().done((isConnected) => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

isConnectionExpensive(仅Android端)
NetInfo API为开发者提供了 isConnectionExpensive函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络，或者通过基于移动数据网络所创建的wifi热点，都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});