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, handlerFunction):移除网络监听事件

//移除网络类型监听
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

 

posted @ 2019-12-31 14:28  XYQ全哥  阅读(1629)  评论(0编辑  收藏  举报