一看就会！教你在react native中用NetInfo判断网络状态 (五)

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

1、NetInfo提供的属性和方法

isConnected：表示网路是否连接

fetch()：获取网络状态

addEventListener()：添加事件监听

removeEventListener()：删除事件监听

2、获取的网络状态类型

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

iOS 平台	none：离线状态 wifi：在线状态，并且是连接的 wifi 网络，或者当前是 iOS 模拟器 cell ：在线状态，通过连接 Edge、3G、WiMax 或者 LET 网络 unknown ：该检测发生异常错误，或者网络状态未知
Android平台	NONE：设备没有网络连接 BLUETOOTH：蓝牙数据连接 DUMMY：虚拟数据连接 ETHERNET：以太网数据连接 MOBILE：手机移动网络数据连接 MOBILE_DUN：拨号移动网络数据连接 MOBILE_HIPRI：高权限的移动网络数据连接 MOBILE_MMS：彩信移动网络数据连接 MOBILE_SUPL：SUP网络数据连接 VPN：虚拟网络连接 ，最低支持 Android API 21 版本 WIFI：无线网络连接 WIMAX：wimax网络连接 UNKNOWN：未知网络数据连接

3、添加权限字段

在android目录，找到AndroidManifest.xml文件，添加如下权限字段，获取相关权限：
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

IOS不需要添加任何东西。

注意: 因修改了Android原生的配置文件，需要重新执行react-native run-android命令。直接reload并不起作用。

4、判断网络状态样例

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

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

    componentDidMount() {
      //检测网络连接信息
      //android对应的Wi-Fi、流量、网络未连接分别为: WIFI、MOBILE、NONE
      //IOS对应的Wi-Fi、流量、网络未连接分别为: wifi、(mobile/cell，忘了是哪一个)、none  
      NetInfo.fetch().done((connectionInfo)=>{
         this.setState({
            connectionInfo: info.toLocaleLowerCase()
         });
      });

      //检测网络变化事件
      NetInfo.addEventListener('change',(connectionInfo)=>{
         this.setState({
            connectionInfo: info.toLocaleLowerCase()
         })
      })
    }

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

说明: NetInfo API为开发者提供了 isConnectionExpensive 函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络，或是通过基于移动数据网络所创建的wifi热点，都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。

目前我的项目中只判断了wifi、移动数据连接、网络未连接几种状态。 有更好的交互欢迎探讨

React Native 找不到NetInfo引用

React Native >= 0.6版本中发现NetInfo引用不到，可参考下面这篇文章

https://developer.aliyun.com/mirror/npm/package/@react-native-community/netinfo