在 React Native 中,NetInfo API 为我们提供了获取网络状态的方法。通过 NetInfo 我们可以检测到手机客户端设备当前的联网/断网状态。
属性&方法
- isConnected:表示网路是否连接
- fetch():获取网络状态
- addEventListener():添加事件监听
- removeEventListener():删除事件监听
获取网络状态类型
上面提到使用 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:未知网络数据连接
实例
1. 逻辑代码
import React, {Component} from 'react';
import {
StyleSheet,
Text,
NetInfo,
View
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isConnected: null,
connectionInfo:null
};
}
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.text}>
当前的网络状态:
{this.state.isConnected ? '网络在线': '离线'}
</Text>
<Text style={styles.text}>
当前网络连接类型:
{this.state.connectionInfo}
</Text>
<Text style={styles.text}>
当前连接网络是否计费:
{NetInfo.isConnectionExpensive === true ? '需要' : '不要'}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 30,
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 18,
margin: 10,
textAlign: 'left'
},
});
2. 效果图
网友评论