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

本文由黑壳博客发布

本文来源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 中国大陆许可协议 进行许可。

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

留下你的脚步
推荐阅读