【React Native】獲取設備信息

一、獲取方案

使用開源的第三方組件react-native-device-info，該組件適用於iOS和Android雙平臺。

npm地址：https://www.npmjs.com/package/react-native-device-info

二、組件使用

在ReactNative項目中下載第三方組件依賴包， 我們一般都是使用命令行來執行下載： 

進入項目執行：npm install –save react-native-device-info 或者 yarn add react-native-device-info

2.1 iOS端：

（1）首先在xcode中進行初始化

打開xcode，找到自己的項目->Libraries文件夾，選擇Add Files to '項目名'，然後找到當前項目目錄/node_modules/react-native-device-info文件夾，找到'RNDe'viceInfo.xcodeproj'文件，然後點擊Add.

（2）再在xcode中加載內庫

找到項目名字 ----> Build Phases ---> Link Binary With Libraries, 點擊‘+’按鈕，添加‘libRNDeviceInfo.a’庫。

（2）繼續添加環境變量

(SRCROOT)/../react-native/Reactand

(SRCROOT)/../../React

並修改recursive.

2.2 Android端：

（1）首先需要修改下Gradle文件

在項目根目錄下運行命令react-native link react-native device-info即可，成功了會增加如下兩行代碼：

（1）在MainActivity.java文件中進行註冊模塊（react-native的版本需要>0.18）

    import com.learnium.RNDeviceInfo.RNDeviceInfo; // <— import

    public class MainActivity extends ReactActivity { 
    …… 
    /** 
     * A list of packages used by the app. If the app uses additional views 
     * or modules besides the default ones, add more packages here. 
     */ 
    @Override 
    protected List getPackages() { 
        return Arrays.asList( 
            new RNDeviceInfo(), // <—— add here 
            new MainReactPackage()); 
        } 
    }

（1）如果你需要在安卓上獲取設備的名字，需要修改AndroidMainfest.xml配置文件，來獲取權限。

在android設備中獲取以下權限： uses-permission android:name=”android.permission.BLUETOOTH”

三、基本用法

Examples

    const apiLevel = DeviceInfo.getAPILevel();
 
    // iOS: ?
    // Android: 25
    // Windows: ?

四、API

Method	Return Type	iOS	Android	Windows	Since
getAPILevel()	number	❌	✅	❌	0.12.0
getApplicationName()	string	✅	✅	✅	0.14.0
getBatteryLevel()	Promise<number>	✅	✅	✅	0.18.0
getBrand()	string	✅	✅	✅	0.9.3
getBuildNumber()	string	✅	✅	✅	?
getBundleId()	string	✅	✅	✅	?
getCarrier()	string	✅	✅	❌	0.13.0
getDeviceCountry()	string	✅	✅	✅	0.9.0
getDeviceId()	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
getInstallReferrer()	string	❌	✅	❌	0.19.0
getInstanceID()	string	❌	✅	❌	?
getLastUpdateTime()	number	❌	✅	❌	0.12.0
getMACAddress()	Promise<string>	✅	✅	❌	0.12.0
getManufacturer()	string	✅	✅	✅	?
getMaxMemory()	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()	string	✅	✅	✅	?
getUserAgent()	string	✅	✅	❌	0.7.0
getVersion()	string	✅	✅	✅	?
is24Hour()	boolean	✅	✅	✅	0.13.0
isEmulator()	boolean	✅	✅	✅	?
isPinOrFingerprintSet()	(callback)boolean	✅	✅	✅	0.10.1
isTablet()	boolean	✅	✅	✅	?

參考鏈接：https://www.npmjs.com/package/react-native-device-info