使用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'));
});
更多精彩請關注微信公衆賬號likeDev