转:http://blog.csdn.net/yangysng07/article/details/51583604
React Native 获取网络状态 NetworkInfo
React-native提供了了一个NetInfo类用来获取和监听网络状态。
-
1.addEventListener(eventName:ChangeEventName,handler:Function) 静态方法,用设置网络变化事件监听器,同时需要传入回调的处理方法
-
2.removeEventListener(eventName:ChangeEventName,handler:Function) 静态方法,用于移除网络事件变化监听器
-
3.fetch() 静态方法 检测当前网络连接状态
-
4.isConnectionExpensve(callback:(metered:?boolean,error?:string)=>void) 静态方法,检测当前连接的网络是否需要计费
-
5.isConnected :ObjectExpression 当前网络是否连接的属性
构造工具类
NetWorkTool.js
-
-
-
-
-
-
- /** * Created by eleven on 16/6/3. */
-
- import React,{
- NetInfo
- } from 'react-native';
-
- const NOT_NETWORK = "网络不可用,请稍后再试";
- const TAG_NETWORK_CHANGE = "NetworkChange";
-
- /*** * 检查网络链接状态 * @param callback */
- const checkNetworkState = (callback) =>{
- NetInfo.isConnected.fetch().done(
- (isConnected) => {
- callback(isConnected);
- }
- );
- }
-
- /*** * 移除网络状态变化监听 * @param tag * @param handler */
- const removeEventListener = (tag,handler) => {
- NetInfo.isConnected.removeEventListener(tag,handler);
- }
-
- /*** * 添加网络状态变化监听 *const addEventListener = (tag,handler)=>{
- NetInfo.isConnected.addEventListener(tag,handler);
- }
- export default{
- checkNetworkState,addEventListener,removeEventListener,NOT_NETWORK,TAG_NETWORK_CHANGE
- }
使用Component.js
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
-
- import NetWorkTool from '../../utils/NetWorkTool'
- handleMethod(isConnected){
- console.log('test',(isConnected ? 'online' : 'offline'));
- }
- constructor(props) {
- super(props);
- NetWorkTool.checkNetworkState((isConnected)=>{
- if(!isConnected){
- Toast.show(NetWorkTool.NOT_NETWORK);
- }
- });
- }
-
- componentWillMount() {
- NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);
- }
-
- componentWillUnmount() {
- NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,136); Box-sizing: border-Box;">this.handleMethod);
- }