神刀安全网

[译]React Native开源获取设备信息组件

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目: https://github.com/jiangqqlmj/js-coach-cn

开源项目地址: https://github.com/rebeccahughes/react-native-device-info

项目介绍

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

刚创建的React Native技术交流3群( 496508742 )欢迎各位大牛,React Native技术爱好者加入交流!

配置介绍

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

2.iOS安装

In XCode, 项目导航栏

  1. 右击选择Libraries
  2. 选择文件到当前项目
  3. 进入node_modules/react-native-device-info
  4. 添加 .xcodeproj文件
  5. XCode导航栏选择项目

Add the libRNDeviceInfo.a from the deviceinfo project to your project’s Build Phases ➜ Link Binary With Libraries

Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure ‘All’ is toggled on (instead of ‘Basic’).

Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React – mark both as recursive. (Should be OK by default.)

Cmd+R快捷键运行项目

3.Android安装

3.1进行修改Gradle文件

在项目根目录下面进行运行react-native link react-native-device-info命令

3.2.在MainActivity.java文件中进行注册模块(演示在>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<ReactPackage> getPackages() {       return Arrays.<ReactPackage>asList(         new RNDeviceInfo(), // <------ add here         new MainReactPackage());     } }

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

<uses-permission android:name="android.permission.BLUETOOTH"/>
使用实例
var DeviceInfo = require('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开源获取设备信息组件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮