React Native组件系列之NetInfo
2017-10-11 16:24
681 查看
这个组件已经在RN刚出来(俩平台同时支持)的时候就已经存在了,用法大家都已经很熟悉了,但是在0.48+版本中,出现了一些变化,前面的用法都会过期
主要完善了两个方面的问题
- 目前的NetInfo API是分平台的.在iOS和Android平台上返回完全不同的值.
跨平台:
-
-
-
-
Android平台:
-
-
-
-
-
-
用法:
方法:
属性:
主要完善了两个方面的问题
- 目前的NetInfo API是分平台的.在iOS和Android平台上返回完全不同的值.
- 目前的NetInfo API无法判定连接的手机网络是 2g, 3g, 还是 4g. 贡献者为了不造成breaking changes,所以直接新增新的api,将前面的api改为黄色警告
- `fetch`方法过时了,用`getConnection`替代 - `change`事件过时了,用`connectionchange`替代. - `fetch`/`change`过时了,用`getConnection`/`connectionchange`替代。返回的枚举值也变了。具体查看下面的值 ConnectionType(设备的网络类型):
跨平台:
-
none- 设备处于离线状态。
-
wifi- 设备处于联网状态且通过wifi链接,或者是一个iOS的模拟器。
-
cellular- 设备是通过Edge、3G、WiMax或是LTE网络联网的。
-
unknown- 发生错误,网络状况不可知
Android平台:
-
bluetooth- 蓝牙数据连接
-
ethernet- 以太网数据连接
-
wimax- WiMAX数据连接
EffectiveConnectionType(无线网络类型) :
-2g
-
3g
-
4g
-
unknown
用法:
NetInfo.getConnectionInfo().then((connectionInfo) => { console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType); }); function handleFirstConnectivityChange(connectionInfo) { console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType); NetInfo.removeEventListener( 'connectionChange', handleFirstConnectivityChange ); } NetInfo.addEventListener( 'connectionChange', handleFirstConnectivityChange );
方法:
static addEventListener(eventName, handler) 添加一个事件监听.支持如下事件: connectionChange: Fires when the network status changes. The argument to the event handler is an object with keys: type: ConnectionType类型 (已在上面列出) effectiveType: EffectiveConnectionType类型 (已在上面列出) change: This event is deprecated. Listen to connectionChange instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above. static removeEventListener(eventName, handler) Removes the listener for network status changes.
static fetch()
This function is deprecated. UsegetConnectionInfoinstead. Returns a promise that resolves with one of the deprecated connectivity types listed above.
static getConnectionInfo() Returns a promise that resolves to an object with type and effectiveType keys whose values are a ConnectionType and an EffectiveConnectionType, (described above), respectively. static isConnectionExpensive()
属性:
isConnected: ObjectExpression An object with the same methods as above but the listener receives a boolean which represents the internet connectivity. Use this if you are only interested with whether the device has internet connectivity.
isConnected
适用于所有平台.异步获取一个 boolean 类型的值判定是否连接到网络.NetInfo.isConnected.fetch().then(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 );
相关文章推荐
- ReactNative系列之十二图标组件react-native-vector-icons的使用
- React-Native系列——自定义View组件开发
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》16、 RN组件之ListView
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- 一起来点React Native——常用组件之Touchable系列
- React Native按钮详解|Touchable系列组件使用详解
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- React Native系列——WebView组件使用介绍
- 《React-Native系列》36、 ReactNative地图组件
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》13、 组件封装之Dialog(iOS和Android通用)
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- 《React-Native系列》38、 ReactNative混合组件封装
- react-native源码分析系列五 绘制js组件
- 《React-Native系列》RN组件之Text和TextInput以及注意要点
- React Native组件系列之ImageBackground
- 《React-Native系列》30、 RN组件间通信