RN中API之NetInfo--浅谈

　　我们在做移动端项目和手机APP应用时，避免不了要获取用户手机的网络状况。在使用RN技术开发APP时，其内置的NetInfo API就是为了解决这一问题的。下面简单的讲下NetInfo如何使用。

　　最新的API与以往的有些不同，具体如下：

- `fetch`方法过时了，用`getConnection`替代
- `change`事件过时了，用`connectionchange`替代.
- `fetch`/`change`过时了，用`getConnection`/`connectionchange`替代。
　

ConnectionType（设备的网络类型）：

　　跨平台：

　　　　- none - 设备处于离线状态。

            - wifi - 设备处于联网状态且通过wifi链接，或者是一个iOS的模拟器。

            - cellular - 设备是通过Edge、3G、WiMax或是LTE网络联网的。

            - unknown - 发生错误，网络状况不可知

     Android平台：

            - bluetooth - 蓝牙数据连接

            - ethernet - 以太网数据连接

            - wimax - WiMAX数据连接

  EffectiveConnectionType(无线网络类型) ：

　　  　- 2g 

　　　  - 3g 

　　　  - 4g 

　　 　 - unknown

import assign from 'object-assign';
import { observer } from 'mobx-react';
import {
  action,
  observable,
} from 'mobx';
import {
  NetInfo,
} from 'react-native';


@observable
  localState = {
    tipMessage: '',
    continueBtnText: '',
    connectionType: null,// none,wifi,cellular,unknown
    effectiveConnectionType: null,// 2g,3g,4g,unknown
  };

@action
  updateLocalState = (part) => {
    assign(this.localState, part);
  };

componentDidMount() {
    NetInfo.addEventListener(
      'connectionChange',
      this.handleConnectionInfoChange,
    );
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      this.updateLocalState({
        connectionType: connectionInfo.type,
        effectiveConnectionType: connectionInfo.effectiveType,
      });
      this.NetworkStateJudge();
    });
  }


  componentWillUnmount() {
    NetInfo.removeEventListener(
      'connectionChange',
      this.handleConnectionInfoChange,
    );
  }
  // 在网络状况/类型发生变化时调用此函数
  handleConnectionInfoChange = (connectionInfo) => {
    this.updateLocalState({
      connectionType: connectionInfo.type,
      effectiveConnectionType: connectionInfo.effectiveType,
    });
    this.NetworkStateJudge();
  };
  // 网络状态分类判断
  NetworkStateJudge = () => {
    if (this.localState.connectionType === 'wifi') {
      this.updateLocalState({
        tipMessage: '当前wifi信号不好，请尝试重启路由器',
        continueBtnText: '重启',
      });
    } else if (this.localState.connectionType === 'none') {
      this.updateLocalState({
        tipMessage: '未连接到网络，请先开通WiFi或流量',
        continueBtnText: '去开通',
      });
    } else if (this.localState.effectiveConnectionType !== 'unknown') {
      this.updateLocalState({
        tipMessage: '当前正在使用非WiFi网络，继续使用将产生费用',
        continueBtnText: '继续使用',
      });
    }
  };


render() {

    return (
      <View style={styles.wrap}>
        <View style={styles.containWrap}>
          <Text style={styles.tipMessage}>{this.localState.tipMessage}</Text>
          <TouchableHighlight
            style={styles.continueBtn}
          >
            <Text style={styles.continueBtnText}>{this.localState.continueBtnText}</Text>
          </TouchableHighlight>
          <Text style={styles.text}>{this.localState.connectionType}</Text>
          <Text style={styles.text}>{this.localState.effectiveConnectionType}</Text>
        </View>
      </View>
    );
  }

 查看更详细使用方法和介绍请参考官网 ：https://facebook.github.io/react-native/docs/netinfo.html