React Native使用NetInfo对当前系统网络的判断

有网状态：

断网状态：

代码如下：

注意：第一次参考了http://www.hangge.com/blog/cache/detail_1614.html代码，一直显示的是unknow状态。。。

最后处理代码如下：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NetInfo
} from 'react-native';

// 参考博客： http://blog.csdn.net/zzx2436125/article/details/77482308
import App from './App';

class Root extends React.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});
        //     alert(connectionInfo);
        });

        //监听网络变化事件
        NetInfo.addEventListener('change', (networkType) => {
        this.setState({isConnected: networkType})
            alert(networkType);
        })
     }

    async componentWillMount() {
        let connect = false;
        const netChange = (isConnect) => {
          // NetInfo.isConnected.removeEventListener('change', netChange);
          connect = isConnect;
        }
        
        // RN获取网络状态(true/false)
        async function getNetWorkState() {
          if (Platform.OS === 'ios') {
            // alert(connect);
            await NetInfo.isConnected.addEventListener('change', netChange);
            return connect;
          } else {
            return await NetInfo.isConnected.fetch();
          }
        }
        return await NetInfo.isConnected.addEventListener('change', netChange);
    }

    // 移除监听
    componentWillUnMount() {
        NetInfo.removeEventListener('change', netChange);
    }

    render() {
        return (
            <App />
        )
    }
}

export default Root;

总结：

这个检测网络状态他是实时检测断网和联网状态的，可以保存状态，每次请求的时候直接取状态即可。