分类 标签 存档 程序员漫画 黑壳相关站点 订阅 搜索

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

1742 浏览

本文由黑壳博客发布

本文来源React-Native 获取设备信息组件(react-native-device-info) - 黑壳网

壳叔搞笑时间

上班路上被一个大爷给拦住了,以为需要帮助,热心的问他怎么了?大爷支支吾吾的,等了半天才说看我长得不错要给我介绍对象。哭笑不得的婉拒之后,兴奋的打电话给老公 “老公老公,刚刚有个男的说要给我介绍对象!”
“是个老头吧!”“你咋知道?”
“就你现在这个样子,除了老头眼神不好,别的男人也看不上啊!”
尼玛!!!

正文

组件说明:

该组件进行封装原生平台的设备相关信息获取,同时适配的 Android 和 iOS 的设备

组件配置

1. 组件安装: npm install react-native-device-info --save

2.iOS 安装

  • 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)/../react-native/React and $(SRCROOT)/../../React 并且修改 recursive
  1. Android 安装

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;  
  
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(),
            new MainReactPackage());  
  }  
}

3.3 如果需要获取的 Android 设备的名称,需要在 AndroidManifest.xml 添加如下的配置

<uses-permission android:name="android.permission.BLUETOOTH"/>

4 React Native 获取参数
前面的配置完成,最后一步获取数据进行验证

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

GitHub 更详细的介绍

https://github.com/rebeccahughes/react-native-device-info

关于我们

程序员太辛苦了

请善待你们身边的每一位程序员~

欢迎在评论写下你的程序员自黑体呦,嗯,相信你可以滴~~~~~~

以上内容,均来自互联网~

欢迎扫描二维码加入我们的组织
黑壳网交流群 Qq:200408242


黑壳博客 blog.bhusk.com

E-mail:keshu@bhusk.com

本文由 黑壳博客的壳叔 创作或转载,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。

可自由转载、引用,但需署名作者且注明文章

评论  
留下你的脚步
推荐阅读