有网状态:
断网状态:
代码如下:
注意:第一次参考了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;
总结:
这个检测网络状态他是实时检测断网和联网状态的,可以保存状态,每次请求的时候直接取状态即可。