React Native网络状态解析及封装

一、介绍

网络封装库已经开源到github：react-native-network

上一篇博客和大家分享了React Native 如何去适配 iPhoneX，本篇博客也可规划为一种适配，React Native网络。

在React Native中，官方给开发者提供了NetInfo来监听手机网络。从官方文档中可以看到，NetInfo提供了两种方式来获取网络状态，并且以异步的方式判断设备是否联网，以及是否使用了移动数据网络。

1. iOS:

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

2. Android:

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

NetInfo获取网络分为两种方式:

（1）注册监听

（2）isConnected

不过这里还是有很多问题，例如在官方文档中：

当我们去使用该方法去获取网络状态时，会发现在Android设备上是可以轻松获取到设备是否联网，但是在iOS设备上，结果回调方法始终不会被调用。百思不得姐...翻看react-native github的 issue，同样很多人遇到这种问题。目前算是RN的一种缺陷，未来版本可能有待解决。目前解决的方式是在Android平台通过isConnected来获取，在iOS设备上则通过注册监听器的方式来获取设备是否联网。为了解决一系列的坑，出现了以下封装。

二、封装

为了方便，我将其常用的获取网络相关功能封装为一个工具，核心代码如下：

Android相关：

/*** * 获取网络连接状态 * (Android设备) * @param callback */const getNetworkState = (callback) => {    NetInfo.isConnected.fetch().done(        (isConnected) => {            callback(isConnected);        }    );}

/** * 网络是否为计费: 移动网络 true , WiFi: false * (Android设备) * @param {*} callback  */const isConnectionExpensive = (callback) => {    NetInfo.isConnectionExpensive().then((isConnectionExpensive) => {        callback(isConnectionExpensive)    }).catch(error => {        console.error(error);    })}

iOS相关：

/** * 注册网络监听，获取网络连接状态 * (iOS设备) * true: 连接， false: 离线 * @param {*}  callback */const addNetListener = (callback) => {    NetInfo.isConnected.addEventListener(TAG_NETWORK_CHANGE, callback);}/** * 移除网络监听 * (iOS设备) * @param {*} callback  */const removeNetListener = (callback) => {    NetInfo.isConnected.removeEventListener(TAG_NETWORK_CHANGE, callback);}

三、使用

NetWork.getNetworkState((isConnected) => {    if(isConnected) {        // 连接状态    } else {        // 未连接状态    }})

该库支持Android、iOS的网络状态监测、当前连接网络类型、Android当前设备网络是否为计费状态等。其他具体使用见库文档。