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);
      }
//、、、