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:"离线"}) } } }