Skip to content

zqHero/deviceInfoDemo

Repository files navigation

前言:顾名思义 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 = "<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

csdN: http://blog.csdn.net/u013233097/article/details/79642509

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

About

ReactNative -device Info demo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages