关于react-native对当前系统网络的判断

前言

对于网络的判断在日常开发中还是经常碰到的。再此我谈谈我在使用react-native对网络的认识，以及踩过的一些坑。

介绍

react-native提供了自己的API去获取网络状态以及监听网络状态的变换**NetInfo**。
对于**NetInfo**官网的介绍是
    **NetInfo exposes info about online/offline status**

使用

// 获取网络状态
NetInfo.fetch().then((reach) => {
  console.log('Initial: ' + reach);
});

// 获取网络的连接状态
NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

// 增加网络监听
NetInfo.addEventListener(
  'change',
  handleFirstConnectivityChange
);
function handleFirstConnectivityChange(reach) {
  console.log('First change: ' + reach);
  NetInfo.removeEventListener(
    'change',
    handleFirstConnectivityChange
  );
}

主要的方法就是这么多了，接下来就是踩坑的时候了。
在我的项目中主要是用到了获取网络连接状态的方法，可是在这时候坑来了。在android平台时，获取网络状态是没问题的，可是在IOS平台时出问题了，总是不能获取正确的网络状态。经过多方的查询找到了一个合适的解决方法。在获取IOS的网络状态时需要调用一次网络状态改变的监听才能准确获取到网络的链接状态
## 解决方法 ##

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 {
    // android平台也加上这段代码，是为了android网络变化时也能准确获取到网络状态
    await NetInfo.isConnected.addEventListener('change', netChange);
    return await NetInfo.isConnected.fetch();
  }
}

经过这样处理后就可以正确获取双平台的网络状态。不过此处还是有一个小坑，在获取IOS的网络状态时，第一次也是不能正确获取网络状态，以后的每次均能获取成功。处理方法就是在项目初始化后调用一次getNetWorkState（）方法。