React Native - 使用NetInfo获取网络信息（是否联网、当前网络状态）
作者：hangge | 2017-04-04 08:10
在 React Native 中，NetInfo API 为我们提供了获取网络状态的方法。通过 NetInfo 我们可以检测到手机客户端设备当前的联网/断网状态。
1，NetInfo提供的属性和方法
- isConnected：表示网路是否连接
- fetch()：获取网络状态
- addEventListener()：添加事件监听
- removeEventListener()：删除事件监听
2，获取的网络状态类型
上面提到使用 fetch() 方法可以获取到网络状态，在不同的平台下可能得到的状态值是不一样的。
（1）iOS 平台
- none：离线状态
- wifi：在线状态，并且是连接的 wifi 网络，或者当前是 iOS 模拟器
- cell ：在线状态，通过连接 Edge、3G、WiMax 或者 LET 网络
- unknown ：该检测发生异常错误，或者网络状态未知
（2）Android 平台
- NONE：设备没有网络连接
- BLUETOOTH：蓝牙数据连接
- DUMMY：虚拟数据连接
- ETHERNET：以太网数据连接
- MOBILE：手机移动网络数据连接
- MOBILE_DUN：拨号移动网络数据连接
- MOBILE_HIPRI：高权限的移动网络数据连接
- MOBILE_MMS：彩信移动网络数据连接
- MOBILE_SUPL：SUP网络数据连接
- VPN：虚拟网络连接 ，最低支持 Android API 21 版本
- WIFI：无线网络连接
- WIMAX：wimax网络连接
- UNKNOWN：未知网络数据连接
3，使用样例
（1）程序启动后自动获取网络连接情况，以及网络状态。并显示在界面上。
（2）同时添加了网络改变事件监听，如果联网状态有变的话会实时显示在界面上。
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NetInfo
} from 'react-native';
//默认应用的容器组件
class App extends Component {
//构造函数
constructor(props) {
super(props);
this.state = {
isConnected: null,
connectionInfo: null
};
}
//页面的组件渲染完毕（render）之后执行
componentDidMount() {
//检测网络是否连接
NetInfo.isConnected.fetch().done((isConnected) => {
this.setState({isConnected});
});
//检测网络连接信息
NetInfo.fetch().done((connectionInfo) => {
this.setState({connectionInfo});
});
//监听网络变化事件
NetInfo.addEventListener('change', (networkType) => {
this.setState({isConnected: networkType})
})
}
//渲染
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
当前的网络状态：
{this.state.isConnected ? '网络在线': '离线'}
</Text>
<Text style={styles.welcome}>
当前网络连接类型： {this.state.connectionInfo}
</Text>
<Text style={styles.welcome}>
当前连接网络是否计费：
{NetInfo.isConnectionExpensive === true ? '需要' : '不要'}
</Text>
</View>
);
}
}
//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 30
},
welcome: {
fontSize: 16,
textAlign: 'left',
margin: 10
}
});
AppRegistry.registerComponent('HelloWorld', () => App);
全部评论（0）