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;

总结：

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

巴特西

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

最新文章

热门文章