剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流！

一、介紹

上一篇部落格和大家分享了React Native 如何去適配 iPhoneX，本篇部落格也可規劃為一種適配，React Native網路。

在React Native中，官方給開發者提供了NetInfo來監聽手機網路。從官方文件中可以看到，NetInfo提供了兩種方式來獲取網路狀態，並且以非同步的方式判斷裝置是否聯網，以及是否使用了移動資料網路。

1. iOS:

   none - 裝置處於離線狀態。
   wifi - 裝置處於聯網狀態且通過wifi連結，或者是一個iOS的模擬器。
   cell - 裝置是通過Edge、3G、WiMax或是LTE網路聯網的。
   unknown - 發生錯誤，網路狀況不可知

2. Android:

   NONE - 裝置處於離線狀態
   BLUETOOTH - 藍芽資料連線
   DUMMY - 模擬資料連線
   ETHERNET - 乙太網資料連線
   MOBILE - 行動網路資料連線
   MOBILE_DUN - 撥號行動網路資料連線
   MOBILE_HIPRI - 高優先順序行動網路資料連線
   MOBILE_MMS

NetInfo獲取網路分為兩種方式:

（1）註冊監聽

（2）isConnected

不過這裡還是有很多問題，例如在官方文件中：

當我們去使用該方法去獲取網路狀態時，會發現在Android裝置上是可以輕鬆獲取到裝置是否聯網，但是在iOS裝置上，結果回撥方法始終不會被呼叫。百思不得姐...翻看react-native github的 issue，同樣很多人遇到這種問題。目前算是RN的一種缺陷，未來版本可能有待解決。目前解決的方式是在Android平臺通過isConnected來獲取，在iOS裝置上則通過註冊監聽器的方式來獲取裝置是否聯網。為了解決一系列的坑，出現了以下封裝。

二、封裝

為了方便，我將其常用的獲取網路相關功能封裝為一個工具，核心程式碼如下：

Android相關：

/***
 * 獲取網路連線狀態
 * (Android裝置)
 * @param callback
 */
const getNetworkState = (callback) => {
    NetInfo.isConnected.fetch().done(
        (isConnected) => {
            callback(isConnected);
        }
    );
}

/**
 * 網路是否為計費: 行動網路 true , WiFi: false
 * (Android裝置)
 * @param {*} callback 
 */
const isConnectionExpensive = (callback) => {
    NetInfo.isConnectionExpensive().then((isConnectionExpensive) => {
        callback(isConnectionExpensive)
    }).catch(error => {
        console.error(error);
    })
}

/**
 * 註冊網路監聽，獲取網路連線狀態
 * (iOS裝置)
 * true: 連線， false: 離線
 * @param {*}  callback
 */
const addNetListener = (callback) => {
    NetInfo.isConnected.addEventListener(TAG_NETWORK_CHANGE, callback);
}

/**
 * 移除網路監聽
 * (iOS裝置)
 * @param {*} callback 
 */
const removeNetListener = (callback) => {
    NetInfo.isConnected.removeEventListener(TAG_NETWORK_CHANGE, callback);
}

三、使用

NetWork.getNetworkState((isConnected) => {
    if(isConnected) {
        // 連線狀態
    } else {
        // 未連線狀態
    }
})