React Native API模塊之NetInfo(網絡信息)使用詳解

尊重版權,轉載請注明出處

本文來自:江清清的技術專欄(http://www.lcode.org)

(一)前言

今天我們繼續來看一下NetInfo模塊-網絡信息模塊

剛創建的React Native技術交流2群( 496601483 ),歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

通過該NetInfo模塊我們可以檢測手機客戶端設備聯網/斷網狀態。下面來看一下官方提供的基本使用實例代碼:

NetInfo.fetch().done((reach) => {
  console.log('Initial: ' + reach);
});
function handleFirstConnectivityChange(reach) {
  console.log('First change: ' + reach);
  NetInfo.removeEventListener(
    'change',
    handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'change',
  handleFirstConnectivityChange
);

(二)iOS平臺

在iOS平臺上面，該模塊會通過異步方式去檢測設備是否聯網還是連接移動數據網絡。該可能的網絡狀態值為：

1.none   設備沒有聯網

2.wifi     設備聯網并且是連接的wifi網絡，或者當前是iOS模擬器

3.cell      設備聯網是通過連接Edge,3G,WiMax或者LET網絡

4.unknown  該檢測發生異常錯誤或者網絡狀態無從知道

(三)Android平臺

在Android平臺上面為了獲取網絡狀態，我們需要在android項目的AndroidManifest.xml文件中配置以下的權限:

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

該也是通過異步方法來檢測設備是否聯網以及連接的網絡的細節信息。

Android平臺的網絡連接類型狀態如下:

1.NONE   設備沒有網絡連接

2.BLUETOOTH  藍牙數據連接

3.DUMMY   虛擬數據連接

4.ETHERNET  以太網數據連接

5.MOBILE  手機移動網絡數據連接

6.MOBILE_DUN  撥號移動網絡數據連接

7.MOBILE_HIPRI  高權限的移動網絡數據連接

8.MOBILE_MMS   彩信移動網絡數據連接

9.MOBILE_SUPL   SUP網絡數據連接

10.V*N   虛擬網絡連接 ，最低支持Android API 21版本

11.WIFI   無線網絡連接

12.WIMAX   wimax網絡連接

13.UNKNOWN  未知網絡數據連接

根據文檔說明:除此之外的其他一些網絡諒解狀態已經被Android API隱藏了，但是我們可以在有需要的時候進行使用。

(四)isConnectionExpensive(判斷連接的網絡是否計費)

該方法只適合Android平臺，用來判斷當前連接的網絡是否需要收費。例如當用戶連接的是移動數據網絡，那么會判斷成該網絡是需要計費的。具體判斷代碼如下：

NetInfo.isConnectionExpensive((isConnectionExpensive) => {

console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});</pre> 
 
(五)isConnected

該方法是合適所有的平臺，通過異步方法來獲取當前與沒有網絡連接，具體檢測代碼實例如下:
NetInfo.isConnected.fetch().done((isConnected) => {

console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
NetInfo.isConnected.removeEventListener(

'change',

handleFirstConnectivityChange


);
}
NetInfo.isConnected.addEventListener(
'change',
handleFirstConnectivityChange
);</pre> 
 
(六)屬性與方法

1.addEventListener(eventName:ChangeEventName,handler:Function)   靜態方法，用設置網絡變化事件監聽器，同時需要傳入回調的處理方法
2.removeEventListener(eventName:ChangeEventName,handler:Function)  靜態方法, 用于移除網絡事件變化監聽器
3.fetch()   靜態方法  檢測當前網絡連接狀態
4.isConnectionExpensve(callback:(metered:?boolean,error?:string)=>void)   靜態方法，檢測當前連接的網絡是否需要計費
5.isConnected :ObjectExpression 當前網絡是否連接的屬性
(七)NetInfo模塊使用實例
上面我們已經針對NetInfo模塊做了詳細的介紹，包括基本知識點以及相關屬性方法，下面依然從實例開始演示一下該模塊的實際使用。在實例之前千萬不要忘記Android項目中的權限配置如下:
  
NetInfo基本用法，進行檢測當前設備的網絡連接狀態,網絡詳細信息已經是否計費，具體代碼如下:
/**


Sample React Native App
https://github.com/非死book/react-native
*/
'use strict';
import React, {
NetInfo,
AppRegistry,
Component,
StyleSheet,
Text,
View,
ToastAndroid,
} from 'react-native';

class NetInfoDemo extends Component {
  constructor(props){
        super(props);
        this.state = {
           isConnected: null,
           connectionInfo:null,
     };
    }
  componentDidMount() {
    NetInfo.isConnected.addEventListener(
        'change',
         this._handleConnectivityChange
    );
    //檢測網絡是否連接
    NetInfo.isConnected.fetch().done(
        (isConnected) => { this.setState({isConnected}); }
    );
    //檢測網絡連接信息
     NetInfo.fetch().done(
        (connectionInfo) => { this.setState({connectionInfo}); }
    );
  }
  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
        'change',
        this._handleConnectivityChange
    );
  }
  _handleConnectivityChange(isConnected) {
       ToastAndroid.show((isConnected ? 'online' : 'offline'),ToastAndroid.SHORT);
  }
  render() {
    return (
      <View >
        <Text style={styles.welcome}>
            當前的網絡狀態
        </Text>
        <Text style={styles.welcome}>
           {this.state.isConnected ? '網絡在線' : '離線'}
        </Text>
        <Text style={styles.welcome}>
            當前網絡連接類型
        </Text>
        <Text style={styles.welcome}>
            {this.state.connectionInfo}
        </Text>
        <Text style={styles.welcome}>
            當前連接網絡是否計費
        </Text>
        <Text style={styles.welcome}>
          {NetInfo.isConnectionExpensive === true ? '需要計費' : '不要'}
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 16,
    textAlign: 'left',
    margin: 10,
  },
});
AppRegistry.registerComponent('NetInfoDemo', () => NetInfoDemo);</pre> 
 
運行截圖如下:

  
(八)最后總結
 今天我們主要講解學習了NetInfo模塊的相關知識點以及基本使用方法，大家有問題可以加一下群React Native技術交流2群( 496601483 ).或者底下進行回復一下。 
 尊重原創，轉載請注明：From Sky丶清（ http://www.lcode.org/ ） 侵權必究！ 
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)
  
關注我的微博，可以獲得更多精彩內容
  
 </div>