(React-Native 學習之九) React-native-device-info 的使用：

前言：顧名思義 React-native-device-info 本第三方就是為了 擷取裝置資訊。

實際上react-native有很多類似第三方，並且使用方式和本例大體相同。作為樣本記錄下，供有需要的同學學習： 1，初始化項目：

初始化一個 react-Native項目：命令：

win+R // 進入命令列cd desktop //進入案頭react-Native  init deviceInfoDemo // 初始化  react-native 項目:cd deviceInfoDemo //進入項目 根目錄yarn install // 或者 npm install 

項目初始化 完成。 2， 開啟模擬器。

使用如下 emulator命令（前提已經配置好 環境變數）：

emulator -list-avds // 該命令用於查看  當前電腦下存在的安卓模擬器 emulator -avd vm_name //修改 vm_name 為你當前電腦 中模擬器名稱  開啟模擬器。

或者 開啟 AndroidStudio 工具 ，開啟sdk manager 開啟模擬器。

啟動模擬器後你可以運行 react-native run-android 命令。模擬器會出現我們初始化的項目介面：

3， 安裝 和連結 device-Info:

進入項目 根目錄 執行命令 安裝 react-native-device-info

//Using npm:npm install --save react-native-device-info//or using yarn:yarn add react-native-device-info

別忘了檢查是否安裝成功。 自動連結：

執行命令：

//shellreact-native link react-native-device-info//(or using [`rnpm`](https://github.com/rnpm/rnpm) for versions of React Native < 0.27) rnpm link react-native-device-info

手動連結：

Android 手動連結 開啟 android/build.gradle:

...  ext {    // dependency versions    googlePlayServicesVersion = "<Your Services Version>"  }...

進入 android/app/build.gradle: 添加 device-info 依賴

dependencies {    ...    compile "com.facebook.react:react-native:+"  // From node_modules+   compile project(':react-native-device-info')}

進入 android/settings.gradle: 指定 device-info 目錄

...include ':app'+ include ':react-native-device-info'+ project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')

對於 React Native 0.29+ 還需： 進入 MainApplication.java:

+ import com.learnium.RNDeviceInfo.RNDeviceInfo;  public class MainApplication extends Application implements ReactApplication {    //......    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(+         new RNDeviceInfo(),  //添加 此行          new MainReactPackage()      );    }    ......  }

對於低版本 React Native: 進入 MainActivity.java: 主介面

+ import com.learnium.RNDeviceInfo.RNDeviceInfo;  public class MainActivity extends ReactActivity {    ......    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(+       new RNDeviceInfo(),  //添加  moudle        new MainReactPackage()      );    }  }

其他 平台不在贅述。 讀者可參考 文末官方地址連結。

貼上 device-info的 部分API方法： API

方法	傳回值類型	iOS	Android	Windows	Since
getAPILevel() //擷取應用程式api版本	number				0.12.0
getApplicationName() //擷取 應用程式名稱	string				0.14.0
getBrand() // 擷取廠家	string				0.9.3
getBuildNumber() // 擷取 應用編譯版本號碼	string				?
getBundleId() //擷取應用程式套件組合標識符	string				?
getCarrier() // 擷取運行商名稱	string				0.13.0
getDeviceCountry() // 根據地區設定資訊擷取裝置國家。	string				0.9.0
getDeviceId() // 擷取裝置 id	string				0.5.0
getDeviceLocale() //擷取裝置的地區	string				0.7.0
getDeviceName() //擷取裝置名稱	string				?
getFirstInstallTime() //擷取應用程式第一次安裝的時間，以毫秒為單位。	number				0.12.0
getFontScale() //擷取裝置字型大小。	number				0.15.0
getFreeDiskStorage()//擷取可用儲存大小，以位元組為單位。	number				0.15.0
getIPAddress() //擷取裝置 當前網路地址	Promise<string>				0.12.0
getInstanceID() //擷取應用程式執行個體ID。	string				?
getLastUpdateTime() //擷取應用程式上次更新的時間，以毫秒為單位。	number				0.12.0
getMACAddress() //擷取網路介面卡MAC地址。	Promise<string>				0.12.0
getManufacturer() //擷取裝置製造商。	string				?
getMaxMemory() //返回JVM試圖使用的最大記憶體量，以位元組為單位。	number				0.14.0
getModel() // 擷取裝置模式	string				?
getPhoneNumber() //擷取電話號碼	string				0.12.0
getReadableVersion()//取應用程式可讀的版本。	string				?
getSerialNumber() //擷取序號	string				0.12.0
getSystemName() //擷取系統名稱	string				?
getSystemVersion() //擷取系統版本	string				?
getTimezone() // 擷取時區	string				?
getTotalDiskCapacity()//擷取完整磁碟儲存大小，以位元組為單位。	number				0.15.0
getTotalMemory() //擷取裝置總記憶體，以位元組為單位。	number				0.14.0
getUniqueID() //擷取裝置唯一的ID	string				?
getUserAgent() //擷取裝置使用者代理程式	string				0.7.0
getVersion() // 擷取 版本	string				?
is24Hour() //告訴使用者偏好是否設定為24小時格式	boolean				0.13.0
isEmulator() //告訴應用程式是否運行在模擬器中	boolean				?
isPinOrFingerprintSet()//告知裝置是否設定了PIN號碼或指紋	(callback)boolean				0.10.1
isTablet() //告知裝置是否是平板電腦	boolean				?

以下 為博主要虛擬機器 擷取到的資訊 硬體資訊：

代碼地址：GitHub：https://github.com/zqHero/deviceInfoDemo

官方地址請看：
https://www.npmjs.com/package/react-native-device-info