(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

别忘了检查是否安装成功。

自动链接：

执行命令：

//shell
react-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 = ""
  }
...

• 进入 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 getPackages() {
      return Arrays.asList(
+         new RNDeviceInfo(),  //添加 此行
          new MainReactPackage()
      );
    }

    ......
  }

对于低版本 React Native:

• 进入 MainActivity.java: 主界面

+ import com.learnium.RNDeviceInfo.RNDeviceInfo;

  public class MainActivity extends ReactActivity {
    ......

    @Override
    protected List getPackages() {
      return Arrays.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	❌	✅	❌	0.12.0
getInstanceID() //获取应用程序实例ID。	string	❌	✅	❌	?
getLastUpdateTime() //获取应用程序上次更新的时间，以毫秒为单位。	number	❌	✅	❌	0.12.0
getMACAddress() //获取网络适配器MAC地址。	Promise	❌	✅	❌	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