React Native 获取设备信息

时间：2024-05-18 13:09:42

一、获取方案

使用开源的第三方组件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.

React Native 获取设备信息React Native 获取设备信息

（2）再在xcode中加载内库

找到项目名字 ----> Build Phases ---> Link Binary With Libraries, 点击‘+’按钮，添加‘libRNDeviceInfo.a’库。

（2）继续添加环境变量

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

(SRCROOT)/../../React

并修改recursive.

React Native 获取设备信息

2.2 Android端：

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

在项目根目录下运行命令react-native link react-native device-info即可，成功了会增加如下两行代码：

React Native 获取设备信息

（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

 

 

相关文章