React Native获取移动设备信息(react-native-device-info)如何使用?

原创 2016年08月30日 12:14:44

React Native获取移动设备信息(react-native-device-info)如何使用?

  • 组件说明
  • 组件使用介绍
  • ios如何使用
  • android如何使用

组件说明

  • 该组件是一个第三方的获取移动设备信息的一个组件,适用于ios和android双平台

组件使用介绍

在ReactNative中使用第三方组件,都必须要下载依赖包
我们一般都是使用命令行来执行下载:
进入项目执行:npm install –save react-native-device-info

ios 使用react-native-device-info

  • 1.首先要在xcode中进行初始化
    打开xcode,找到自己的项目,展开后右击Libraries文件夹。
    选择Add Files to “projectName”…
    找到当前项目目录–>node_modules/react-native-device-info文件夹,找到”RNDeviceInfo.xcodeproj”文件,然后点击Add
  • 2.在xcode中加载
    在Xcode中点击你的工程名字——>Build Phases——>Link Binary With Libraries——>点击 ‘+’号按钮,添加libRNDeviceInfo.a文件
  • 3.添加环境变量
    (SRCROOT)/../reactnative/Reactand(SRCROOT)/../../React 并且修改 recursive
  • 4.基本的用法
    ***import DeviceInfo from ‘react-native-device-info’
    console.log(“Device Unique ID”, DeviceInfo.getUniqueID()); // e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9
    // * note this is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled
    console.log(“Device Manufacturer”, DeviceInfo.getManufacturer()); // e.g. Apple
    console.log(“Device Model”, DeviceInfo.getModel()); // e.g. iPhone 6
    console.log(“Device ID”, DeviceInfo.getDeviceId()); // e.g. iPhone7,2 / or the board on Android e.g. goldfish
    console.log(“Device Name”, DeviceInfo.getSystemName()); // e.g. iPhone OS
    console.log(“Device Version”, DeviceInfo.getSystemVersion()); // e.g. 9.0
    console.log(“Bundle Id”, DeviceInfo.getBundleId()); // e.g. com.learnium.mobile
    console.log(“Build Number”, DeviceInfo.getBuildNumber()); // e.g. 89
    console.log(“App Version”, DeviceInfo.getVersion()); // e.g. 1.1.0
    console.log(“App Version (Readable)”, DeviceInfo.getReadableVersion()); // e.g. 1.1.0.89
    console.log(“Device Name”, DeviceInfo.getDeviceName()); // e.g. Becca’s iPhone 6
    console.log(“User Agent”, DeviceInfo.getUserAgent()); // e.g. Dalvik/2.1.0 (Linux; U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
    console.log(“Device Locale”, DeviceInfo.getDeviceLocale()); // e.g en-US
    console.log(“Device Country”, DeviceInfo.getDeviceCountry()); // e.g US

android 使用react-native-device-info

  • 1.首先需要修改下Gradle文件
    在你的根目录下运行:react-native link react-native-device-info
  • 2.在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());
}
}
  • 3.如果你需要在安卓上获取设备的名字,需要修改AndroidManifest.xml配置文件,来获取权限。

在android设备中获取以下权限:
uses-permission android:name=”android.permission.BLUETOOTH”



  • 4.android中用法

***import DeviceInfo from ‘react-native-device-info’
console.log(“Device Unique ID”, DeviceInfo.getUniqueID()); // e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9
// * note this is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled
console.log(“Device Manufacturer”, DeviceInfo.getManufacturer()); // e.g. Apple
console.log(“Device Model”, DeviceInfo.getModel()); // e.g. iPhone 6
console.log(“Device ID”, DeviceInfo.getDeviceId()); // e.g. iPhone7,2 / or the board on Android e.g. goldfish
console.log(“Device Name”, DeviceInfo.getSystemName()); // e.g. iPhone OS
console.log(“Device Version”, DeviceInfo.getSystemVersion()); // e.g. 9.0
console.log(“Bundle Id”, DeviceInfo.getBundleId()); // e.g. com.learnium.mobile
console.log(“Build Number”, DeviceInfo.getBuildNumber()); // e.g. 89
console.log(“App Version”, DeviceInfo.getVersion()); // e.g. 1.1.0
console.log(“App Version (Readable)”, DeviceInfo.getReadableVersion()); // e.g. 1.1.0.89
console.log(“Device Name”, DeviceInfo.getDeviceName()); // e.g. Becca’s iPhone 6
console.log(“User Agent”, DeviceInfo.getUserAgent()); // e.g. Dalvik/2.1.0 (Linux; U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
console.log(“Device Locale”, DeviceInfo.getDeviceLocale()); // e.g en-US
console.log(“Device Country”, DeviceInfo.getDeviceCountry()); // e.g US


版权声明:本文为博主原创文章,未经博主允许不得转载。

react-native获取设备信息组件(react-native-device-info)

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-acquisition-device-infor...

React Native 获取设备的宽高

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import Reac...

《React Native移动开发实战》试读

  • 2017年08月03日 14:39
  • 3.49MB
  • 下载

react Native移动开发实战

  • 2017年12月09日 20:02
  • 13.37MB
  • 下载

Mac环境下的React-Native环境配置流程(主要解决问题Could not install the app on the device)

Mac环境下的React-Native环境配置流程(主要解决问题Could not install the app on the device)纯属记录,如有雷同纯属巧合(真不害臊~(@^_^@)~)...

移动开发的未来-React Native.pptx

  • 2016年10月29日 00:13
  • 26.39MB
  • 下载

React-Native - 使用AppState获取App运行状态(以及监听状态改变事件)

有时我们需要知道应用当前的运行状态,这样我们可以根据不同的状态进行相应的操作。React Native 提供了 AppState 来告知我们 App 当前的状态:激活(前台运行中)、还是后台运行。甚至...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native获取移动设备信息(react-native-device-info)如何使用?
举报原因:
原因补充:

(最多只允许输入30个字)