【React Native】获取设备网络状态

ZhangKui_c

已于 2024-06-24 16:24:59 修改

阅读量2.4k

点赞数

分类专栏： React Native（React）文章标签： react native RN 获取设备网络状态 NetInfo

于 2018-09-28 11:41:35 首次发布

本文链接：https://blog.csdn.net/ZhangKui0418/article/details/82878175

版权

React Native（React）专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在React Native应用中使用NetInfo API获取和监听设备的网络状态。在Android上需要添加权限，网络状态包括WiFi、Cell等。同时，iOS可能存在需要先监听网络变化才能获取正确状态的问题。

摘要由CSDN通过智能技术生成

一、快速使用

React Native 内库中提供了 NetInfo API获取设备当前的网络状态，直接使用即可。

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

获取网络状态是异步的，这儿使用了Promise机制。

说明：

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

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

2，网络状态

iOS端：

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

Android端：

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

二、判断是否有网络连接

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

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

三、监听网络变化

在获取了网络状态后，开发者还可以通过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);
    }

注意：在我的项目中主要是用到了获取网络连接状态的方法，可是在这时候坑来了。在android平台时，获取网络状态是没问题的，可是在IOS平台时出问题了，总是不能获取正确的网络状态。解决：在获取IOS的网络状态时需要调用一次网络状态改变的监听才能准确获取到网络的链接状态。如果有更好的解决方案，或者有遇到其它坑，欢迎留言……