您當(dāng)前位置：首頁 > php開源 > 綜合技術(shù) > [React Native]獲取網(wǎng)絡(luò)狀態(tài)

[React Native]獲取網(wǎng)絡(luò)狀態(tài)

來源：程序員人生發(fā)布時(shí)間：2016-09-27 08:59:18 閱讀次數(shù)：3883次

使用React Native，可使用NetInfo API獲得手機(jī)當(dāng)前的各個(gè)網(wǎng)絡(luò)狀態(tài)。

    componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:'+status);
        });
    }

獲得網(wǎng)絡(luò)狀態(tài)是異步的,上面使用了Promise機(jī)制。

Android端網(wǎng)絡(luò)狀態(tài)

要求網(wǎng)絡(luò)信息需要先在利用的AndroidManifest.xml文件中添加以下權(quán)限字段，申請(qǐng)相干權(quán)限：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

這里寫圖片描述

修改完成后，reaload代碼是無效的，由于我們修改了Android原生的配置文件，需要重新履行react-native run-android命令。這個(gè)命令重新編譯對(duì)應(yīng)的Android項(xiàng)目安裝包并安裝得手機(jī)中。

Android可獲得的狀態(tài)比較多，上面的status可能有以下的值，直接把文檔貼出來了：
+ NONE - 裝備處于離線狀態(tài)
+ BLUETOOTH - 藍(lán)牙數(shù)據(jù)連接
+ DUMMY - 摹擬數(shù)據(jù)連接
+ ETHERNET - 以太網(wǎng)數(shù)據(jù)連接
+ MOBILE - 移動(dòng)網(wǎng)絡(luò)數(shù)據(jù)連接
+ MOBILE_DUN - 撥號(hào)移動(dòng)網(wǎng)絡(luò)數(shù)據(jù)連接
+ MOBILE_HIPRI - 高優(yōu)先級(jí)移動(dòng)網(wǎng)絡(luò)數(shù)據(jù)連接
+ MOBILE_MMS - 彩信移動(dòng)網(wǎng)絡(luò)數(shù)據(jù)連接
+ MOBILE_SUPL - 安全用戶面定位（SUPL）數(shù)據(jù)連接
+ VPN - 虛擬網(wǎng)絡(luò)連接。需要Android5.0以上
+ WIFI - WIFI數(shù)據(jù)連接
+ WIMAX - WiMAX數(shù)據(jù)連接
+ UNKNOWN - 未知數(shù)據(jù)連接

IOS端網(wǎng)絡(luò)狀態(tài)

none - 裝備處于離線狀態(tài)。
wifi - 裝備處于聯(lián)網(wǎng)狀態(tài)且通過wifi鏈接，或是1個(gè)iOS的摹擬器。
cell - 裝備是通過Edge、3G、WiMax或是LTE網(wǎng)絡(luò)聯(lián)網(wǎng)的。
unknown - 產(chǎn)生毛病，網(wǎng)絡(luò)狀態(tài)不可知

監(jiān)聽網(wǎng)絡(luò)改變事件

在獲得了網(wǎng)絡(luò)狀態(tài)后，開發(fā)者還可以通過NetInfo API提供的監(jiān)聽器，監(jiān)聽網(wǎng)絡(luò)狀態(tài)改變事件。這樣當(dāng)手機(jī)網(wǎng)絡(luò)狀態(tài)改變時(shí)，React Native利用馬上收到通知。

    componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:' + status);
        });
        //監(jiān)聽網(wǎng)絡(luò)狀態(tài)改變
        NetInfo.addEventListener('change', this.handleConnectivityChange);

    }

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

    handleConnectivityChange(status) {
        console.log('status change:' + status);
        //監(jiān)聽第1次改變后, 可以取消監(jiān)聽.或在componentUnmount中取消監(jiān)聽
       // NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

判斷是不是有網(wǎng)絡(luò)連接

NetInfo API 為開發(fā)者提供了isConnected函數(shù)用來判斷當(dāng)前手機(jī)是不是有網(wǎng)絡(luò)連接。

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

isConnectionExpensive(僅Android端)

NetInfo API為開發(fā)者提供了 isConnectionExpensive函數(shù)用來判斷當(dāng)前網(wǎng)絡(luò)連接是不是付費(fèi)的。如果當(dāng)前連接是通過移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)，或通過基于移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)所創(chuàng)建的wifi熱門，都有可能被判定為計(jì)費(fèi)的數(shù)據(jù)連接。目前這個(gè)函數(shù)只為Android平臺(tái)提供。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});

更多精彩請(qǐng)關(guān)注微信公眾賬號(hào)likeDev
這里寫圖片描述