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

3. 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 更详细的介绍

react-native-device-info/react-native-device-info Device Information for React Native iOS and Android - react-native-device-info/react-native-device-info GitHub - github.com

关于我们

程序员太辛苦了

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

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

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

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