react native之获知设备联网或离线的状态信息。

NetInfo模块可以获知设备联网或离线的状态信息。

NetInfo.fetch().done((reach) => {
  console.log('Initial: ' + reach);
});
function handleFirstConnectivityChange(reach) {
  console.log('First change: ' + reach);
  NetInfo.removeEventListener(
    'connectionChange',handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'connectionChange',handleFirstConnectivityChange
);

IOS

以异步的方式判断设备是否联网，以及是否使用了移动数据网络。

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

Android

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

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

Android的联网类型：

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

其他的连接状态已被Android API隐藏，但可以在需要时使用。

isConnectionExpensive

此方法仅Android可用。用于判断当前活动的连接是否计费。如果当前连接是通过移动数据网络，或者通过基于移动数据网络所创建的wifi热点，都有可能被判定为计费的数据连接。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});

isConnected

此方法所有平台皆可使用。以异步方式获取一个布尔值，用于判断当前设备是否联网。

NetInfo.isConnected.fetch().done((isConnected) => {
  console.log('First,is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then,is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
    'change',handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'change',handleFirstConnectivityChange
);

方法：

static addEventListener(eventName,handler)

在网络状况/类型发生变化时调用此监听函数。回调的参数为上面列出的网络状况/类型。

static removeEventListener(eventName,handler)#

移除网络状况/类型变化的监听函数。

static fetch()

返回一个promise，用于获取当前的网络状况/类型。

static isConnectionExpensive()

属性：

isConnected：

此属性为一个对象，也可调用上面列出的方法。但其监听函数接受的参数为一个布尔值，仅仅能表明当前网络是否联通。如果你只关心设备是否连上网了（不关心网络类型），那么使用此属性即可。

/**
 *
 * NetInfo模块可以获知设备联网或离线的状态信息。
 *
 */

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



class NetInfoDemo extends Component {
  constructor(props){
      super(props)
      this.state={
          connectionInfo: "",//网络连接类型
          isConnected:""     //网络是否连接
      }
  }
  render() {
    return (
        <View>
           <Text style={{marginTop:100}}>NetInfo模块可以获知设备联网或离线的状态信息。打开控制台查看</Text>
            <Text>当前网络类型:{this.state.connectionInfo}</Text>
            <Text>当前网络连接状态:{this.state.isConnected}</Text>
        </View>
    );
  }
  componentDidMount(){
      var self=this;
      //监听网络类型变化
      NetInfo.addEventListener("change",self._handleConnectionInfoChange.bind(self))
      //监听网络连接状态变化
      NetInfo.isConnected.addEventListener('change',self.ChangeIsConnectedState.bind(self));
      //初次获取网络类型状态
      NetInfo.fetch().done((connectionInfo)=>{ self.setState({connectionInfo:connectionInfo}); });
      //初次获取网络连接状态
      NetInfo.isConnected.fetch().done((isConnected) => {self.ChangeIsConnectedState(isConnected)});
  }
  componentWillUnmount(){
      var self=this;
      //组建删除前卸载监听
      NetInfo.removeEventListener("change",self._handleConnectionInfoChange.bind(self))
      NetInfo.isConnected.removeEventListener('change',self.ChangeIsConnectedState);
  }

   _handleConnectionInfoChange(connectionInfo) {
      this.setState({connectionInfo:connectionInfo});
   }
    ChangeIsConnectedState(isConnected){
        if(isConnected){
            this.setState({isConnected:"在线"})
        }else{
            this.setState({isConnected:"离线"})
        }
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!