本文由黑壳博客发布

本文来源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