[React Native]獲取網路狀態

weixin_34208185發表於2017-12-21
React Native

使用React Native，可以使用NetInfo API獲取手機當前的各個網路狀態。

    componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:'+status);
        });
    }
複製程式碼

獲取網路狀態是非同步的,上面使用了Promise機制。

Android端網路狀態

請求網路資訊需要先在應用的AndroidManifest.xml檔案中新增如下許可權欄位，申請相關許可權：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
複製程式碼

修改完成後，reaload程式碼是無效的，因為我們修改了Android原生的配置檔案，需要重新執行react-native run-android命令。這個命令重新編譯對應的Android專案安裝包並安裝到手機中。

Android可獲取的狀態比較多，上面的status可能有如下的值，直接把文件貼出來了：

  • NONE - 裝置處於離線狀態
  • BLUETOOTH - 藍芽資料連線
  • DUMMY - 模擬資料連線
  • ETHERNET - 乙太網資料連線
  • MOBILE - 行動網路資料連線
  • MOBILE_DUN - 撥號行動網路資料連線
  • MOBILE_HIPRI - 高優先順序行動網路資料連線
  • MOBILE_MMS - 彩信行動網路資料連線
  • MOBILE_SUPL - 安全使用者面定位（SUPL）資料連線
  • VPN - 虛擬網路連線。需要Android5.0以上
  • WIFI - WIFI資料連線
  • WIMAX - WiMAX資料連線
  • UNKNOWN - 未知資料連線

iOS端網路狀態

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

監聽網路改變事件

在獲取了網路狀態後，開發者還可以通過NetInfo API提供的監聽器，監聽網路狀態改變事件。這樣當手機網路狀態改變時，React Native應用馬上收到通知。

    componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:' + status);
        });
        //監聽網路狀態改變
        NetInfo.addEventListener('change', this.handleConnectivityChange);

    }

    componentWillUnMount() {
        console.log("componentWillUnMount");
        NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

    handleConnectivityChange(status) {
        console.log('status change:' + status);
        //監聽第一次改變後, 可以取消監聽.或者在componentUnmount中取消監聽
       // NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }
複製程式碼

判斷是否有網路連線

NetInfo API 為開發者提供了isConnected函式用來判斷當前手機是否有網路連線。

NetInfo.isConnected.fetch().done((isConnected) => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

複製程式碼

isConnectionExpensive(僅Android端)

NetInfo API為開發者提供了 isConnectionExpensive函式用來判斷當前網路連線是否付費的。如果當前連線是通過移動資料網路，或者通過基於移動資料網路所建立的wifi熱點，都有可能被判定為計費的資料連線。目前這個函式只為Android平臺提供。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});```
複製程式碼

相關文章