在 React Native 中,NetInfo API 提供了获取网络状态的方法,通过 NetInfo 可以检测到手机设备当前的联网/断网状态。
1、NetInfo提供的属性和方法
isConnected:表示网路是否连接
fetch():获取网络状态
addEventListener():添加事件监听
removeEventListener():删除事件监听
2、获取的网络状态类型
可使用 fetch() 方法可以获取到网络状态,在不同的平台下可能得到的状态值是不一样的。
iOS 平台 | none:离线状态 wifi:在线状态,并且是连接的 wifi 网络,或者当前是 iOS 模拟器 cell :在线状态,通过连接 Edge、3G、WiMax 或者 LET 网络 unknown :该检测发生异常错误,或者网络状态未知 |
Android平台 | NONE:设备没有网络连接 BLUETOOTH:蓝牙数据连接 DUMMY:虚拟数据连接 ETHERNET:以太网数据连接 MOBILE:手机移动网络数据连接 MOBILE_DUN:拨号移动网络数据连接 MOBILE_HIPRI:高权限的移动网络数据连接 MOBILE_MMS:彩信移动网络数据连接 MOBILE_SUPL:SUP网络数据连接 VPN:虚拟网络连接 ,最低支持 Android API 21 版本 WIFI:无线网络连接 WIMAX:wimax网络连接 UNKNOWN:未知网络数据连接 |
3、添加权限字段
在android目录,找到AndroidManifest.xml文件,添加如下权限字段,获取相关权限:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />IOS不需要添加任何东西。
注意: 因修改了Android原生的配置文件,需要重新执行react-native run-android命令。直接reload并不起作用。
4、判断网络状态样例
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NetInfo} from 'react-native';
export default class App extends Component{
constructor(props){
super(props);
this.state={
connectionInfo: null
}
}
componentDidMount() {
//检测网络连接信息
//android对应的Wi-Fi、流量、网络未连接分别为: WIFI、MOBILE、NONE
//IOS对应的Wi-Fi、流量、网络未连接分别为: wifi、(mobile/cell,忘了是哪一个)、none
NetInfo.fetch().done((connectionInfo)=>{
this.setState({
connectionInfo: info.toLocaleLowerCase()
});
});
//检测网络变化事件
NetInfo.addEventListener('change',(connectionInfo)=>{
this.setState({
connectionInfo: info.toLocaleLowerCase()
})
})
}
render() {
let { connectionInfo } = this.state;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
当前的网络状态:{connectionInfo !== "none"? '网络在线': '离线'}
</Text>
<Text style={styles.welcome}>
当前的网络连接类型:{connectionInfo}
</Text>
<Text style={styles.welcome}>
当前连接的网络是否需要计费:
{NetInfo.isConnectionExpensive===true?'需要':'不需要'}
</Text>
</View>
);
} //isConnectionExpensive(仅Android端)
}
说明: NetInfo API为开发者提供了 isConnectionExpensive 函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络,或是通过基于移动数据网络所创建的wifi热点,都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。
目前我的项目中只判断了wifi、移动数据连接、网络未连接几种状态。 有更好的交互欢迎探讨
React Native 找不到NetInfo引用
React Native >= 0.6版本中发现NetInfo引用不到,可参考下面这篇文章
https://developer.aliyun.com/mirror/npm/package/@react-native-community/netinfo