美文网首页React Native
React Native获取移动设备信息(react-nativ

React Native获取移动设备信息(react-nativ

作者: 亓凡 | 来源:发表于2017-03-15 18:37 被阅读3784次
    • 组件说明
    • 组件使用介绍
    • ios如何使用
    • android如何使用

    组件说明

    • 该组件是一个第三方的获取移动设备信息的一个组件,适用于ios和android双平台

    组件使用介绍

    在ReactNative中使用第三方组件,都必须要下载依赖包
    我们一般都是使用命令行来执行下载:
    进入项目执行:npm install --save react-native-device-info

    ios 使用react-native-device-info

    • 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
    • 4.基本的用法

    ***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


    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; // <--- 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.如果你需要在安卓上获取设备的名字,需要修改AndroidManifest.xml配置文件,来获取权限。

    在android设备中获取以下权限:
    uses-permission android:name="android.permission.BLUETOOTH"


    • 4.android中用法

    ***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


    相关文章

      网友评论

      • 有无01:我获取设备名DeviceInfo.getDeviceName(),报如下错误:ExceptionsManager.js:63 Cannot read property 'deviceName' of undefined,能帮我解决一下么,🙏
        萤火虫叔叔:请问你解决了吗,我也遇到这个问题了
      • 有无01:你好!3.添加环境变量
        $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React 并且修改 recursive,怎么做了?谢谢

      本文标题:React Native获取移动设备信息(react-nativ

      本文链接:https://www.haomeiwen.com/subject/lhkrnttx.html