ReactNative: 使用NetInfo获取网络状态

一、简介

网络监听，这是App开发中必不可少的功能。开发者会根据网络状态的不同，对App采取不同的应对措施来应对网络问题。例如，在WIFI状态下，用户可以浏览大图或者自动播放视频，在离线状态下，要关闭正在加载的Loading，通过提示用户网络状态不好，以避免长时间等待，提高用户体验。在iOS移动端开发中，我们一般会使用AFN第三方框架中的AFNetWorkingReachability这个类来监听网络。同样地，ReactNative中也提供了一个监听网络的API，就是NetInfo。

 

二、API

属性：

NetInfo提供了属性isConnected来获取网络连接对象。

//获取设备是否具备网络连接对象: 包含三个函数：添加监听、移除监听、获取网络状态的函数
console.log('NetInfo.isConnected:',NetInfo.isConnected);

iOS平台中提供的网络枚举类型

//离线状态
none

//在线状态，并通过WIFI或者iOS模拟器连接
wifi

//网路连接，通过3/4G、WiMax或者LTE进行连接
cell

//错误情况，网络状态未知
unknown

函数：

1、fetch():  获取网络状态，可以是网络枚举类型，也可以是网络连接情况。

//获取网络枚举类型
NetInfo.fetch().then(function (reachability) {
     console.log('network type:'+reachability);
});

//获取网络连接情况
NetInfo.isConnected.fetch().then(function (isConnected) {
     console.log('current network status:' + (isConnected ? 'online' : 'offline'));
});

2、addEventListener(eventName: ChangeEventName, handler: Function)：添加网络监听事件

//添加网络类型监听
NetInfo.addEventListener('change', function (reachability) {
    console.log('network type change hanpend, network type:'+reachability);
});

//添加网络连接监听
NetInfo.isConnected.addEventListener('change',function (isConnected) {
     console.log('network status change happened, isConnected = '+ isConnected);
});

3、removeEventListener(eventName: ChangeEventName, handler: Function)：移除网络监听事件

//移除网络类型监听
NetInfo.removeEventListener('change', function (reachability) {
     console.log('after remove, network type:'+reachability);
});

//移除网络连接监听
NetInfo.isConnected.removeEventListener('change', function (isConnected) {
     console.log('after remove, network status:'+isConnected);
});

 

三、使用

现在来测试一下API的使用，示例如下：

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    NetInfo
} from 'react-native';


export default class ReactNativeDemo extends Component {

    constructor(){
        super();

        //获取设备是否具备网络连接对象: 包含三个函数：添加监听、移除监听、获取网络状态
        console.log('NetInfo.isConnected:',NetInfo.isConnected);

        //添加网络类型监听，变化过程中，返回枚举类型
        NetInfo.addEventListener('change', function (reachability) {
            console.log('network type change happened, network type:'+reachability);
        });

        //添加网络连接监听，变化过程中，返回布尔值
        NetInfo.isConnected.addEventListener('change',function (isConnected) {
            console.log('network status change happened, isConnected = '+ isConnected);
        });
    }

    componentDidMount() {

        //获取网络类型，返回枚举值
        NetInfo.fetch().then(function (reachability) {
            console.log('current network type:'+reachability);
        });

        //获取网络连接，返回布尔值
        NetInfo.isConnected.fetch().then(function (isConnected) {
            console.log('current network status:' + (isConnected ? 'online' : 'offline'));
        });
    }

    componentWillUnmount() {

        //移除网络类型监听
        NetInfo.removeEventListener('change', function (reachability) {
            console.log('after remove, network type:'+reachability);
        });

        //移除网络连接监听
        NetInfo.isConnected.removeEventListener('change', function (isConnected) {
            console.log('after remove, network status:'+isConnected);
        });
    };


    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <Text/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

xcode日志如下：

2019-12-31 14:25:06.664 [info][tid:com.facebook.react.JavaScript] 'NetInfo.isConnected:', { addEventListener: [Function: addEventListener],
  removeEventListener: [Function: removeEventListener],
  fetch: [Function: fetch] }
2019-12-31 14:25:06.694 [info][tid:com.facebook.react.JavaScript] network type change happened, network type:wifi
2019-12-31 14:25:06.694 [info][tid:com.facebook.react.JavaScript] network status change happened, isConnected = true
2019-12-31 14:25:06.704 [info][tid:com.facebook.react.JavaScript] current network type:wifi
2019-12-31 14:25:06.705 [info][tid:com.facebook.react.JavaScript] current network status:online