React Native 获取网络状态 NetworkInfo

React Native 获取网络状态 NetworkInfo

react-native提供了了一个NetInfo类用来获取和监听网络状态。

属性与方法

• 1.addEventListener(eventName:ChangeEventName,handler:Function) 静态方法，用设置网络变化事件监听器，同时需要传入回调的处理方法

• 2.removeEventListener(eventName:ChangeEventName,handler:Function) 静态方法, 用于移除网络事件变化监听器

• 3.fetch() 静态方法 检测当前网络连接状态

• 4.isConnectionExpensve(callback:(metered:?boolean,error?:string)=>void) 静态方法，检测当前连接的网络是否需要计费

• 5.isConnected :ObjectExpression 当前网络是否连接的属性

构造工具类

NetWorkTool.js

/** * Created by eleven on 16/6/3. */import React,{    NetInfo} from 'react-native';const NOT_NETWORK = "网络不可用，请稍后再试";const TAG_NETWORK_CHANGE = "NetworkChange";/*** * 检查网络链接状态 * @param callback */const checkNetworkState = (callback) =>{    NetInfo.isConnected.fetch().done(        (isConnected) => {            callback(isConnected);        }    );}/*** * 移除网络状态变化监听 * @param tag * @param handler */const removeEventListener = (tag,handler) => {    NetInfo.isConnected.removeEventListener(tag, handler);}/*** * 添加网络状态变化监听 * @param tag * @param handler */const addEventListener = (tag,handler)=>{    NetInfo.isConnected.addEventListener(tag, handler);}export default{    checkNetworkState,    addEventListener,    removeEventListener,    NOT_NETWORK,    TAG_NETWORK_CHANGE}

使用

Component.js

//、、、  import NetWorkTool from '../../utils/NetWorkTool'//、、、  handleMethod(isConnected){       console.log('test', (isConnected ? 'online' : 'offline'));   }//、、、constructor(props) {    super(props);    NetWorkTool.checkNetworkState((isConnected)=>{          if(!isConnected){                Toast.show(NetWorkTool.NOT_NETWORK);          }        });  }componentWillMount() {       NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);   }componentWillUnmount() {      NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);      }//、、、