在 React Native 中，NetInfo API 为我们提供了获取网络状态的方法。通过 NetInfo 我们可以检测到手机客户端设备当前的联网/断网状态。

属性&方法

  • isConnected：表示网路是否连接
  • fetch()：获取网络状态
  • addEventListener()：添加事件监听
  • removeEventListener()：删除事件监听

获取网络状态类型

上面提到使用 fetch() 方法可以获取到网络状态，在不同的平台下可能得到的状态值是不一样的。
（1）iOS 平台

  • none：离线状态
  • wifi：在线状态，并且是连接的 wifi 网络，或者当前是 iOS 模拟器
  • cell ：在线状态，通过连接 Edge、3G、WiMax 或者 LET 网络
  • unknown ：该检测发生异常错误，或者网络状态未知

（2）Android 平台

  • NONE：设备没有网络连接
  • BLUETOOTH：蓝牙数据连接
  • DUMMY：虚拟数据连接
  • ETHERNET：以太网数据连接
  • MOBILE：手机移动网络数据连接
  • MOBILE_DUN：拨号移动网络数据连接
  • MOBILE_HIPRI：高权限的移动网络数据连接
  • MOBILE_MMS：彩信移动网络数据连接
  • MOBILE_SUPL：SUP网络数据连接
  • VPN：虚拟网络连接 ，最低支持 Android API 21 版本
  • WIFI：无线网络连接
  • WIMAX：wimax网络连接
  • UNKNOWN：未知网络数据连接

实例

1. 逻辑代码

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isConnected: null,
      connectionInfo:null
    };
    
  }

  componentDidMount() {
    //检测网络是否连接
    NetInfo.isConnected.fetch().done((isConnected) => {
      this.setState({isConnected});
    });

    //检测网络连接信息
    NetInfo.fetch().done((connectionInfo)=> {
      this.setState({connectionInfo});
    });

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

  

  render() {
    return (
      <View style = {styles.container}>
        <Text style={styles.text}>
          当前的网络状态：
          {this.state.isConnected ? '网络在线': '离线'}
        </Text>
        <Text style={styles.text}>
          当前网络连接类型： 
          {this.state.connectionInfo}
        </Text>
        <Text style={styles.text}>
          当前连接网络是否计费：
          {NetInfo.isConnectionExpensive === true ? '需要' : '不要'}
        </Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 18,
    margin: 10,
    textAlign: 'left'
  },
});

2. 效果图
【Kevin Learn React Native】--＞获取网络信息_网络连接