首页 > 其他分享 >react-native-device-info(获取设备信息)在React Native安装使用步骤

react-native-device-info(获取设备信息)在React Native安装使用步骤

时间:2022-11-09 12:12:03浏览次数:61  
标签:info react console log await DeviceInfo React native

官方参考地址:https://github.com/react-native-community/react-native-device-info

1.安装

//下载依赖
npm install --save react-native-device-info    ||   yarn add react-native-device-info

//链接原生库
react-native link react-native-device-info   ||   yarn react-native link react-native-device-info

2.权限配置

// 编辑/android/app/src/main/AndroidManifest.xml文件加入权限信息

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />

3.对应参数获取方法

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
    }
    //初始加载、获取物理硬件信息
    async componentWillMount() {
      //  await console.log('api版本:', DeviceInfo.getAPILevel());
        await console.log('品牌:', DeviceInfo.getBrand());
        await console.log('当前应用名称:', DeviceInfo.getApplicationName());
        await console.log('应用编译版本号:', DeviceInfo.getBuildNumber());
        await console.log('获取应用程序包标识符:', DeviceInfo.getBundleId());
        await console.log('运营商名称:', DeviceInfo.getCarrier());
     //   await console.log('设备所处国家:', DeviceInfo.getDeviceCountry());
        await console.log('设备ID:', DeviceInfo.getDeviceId());
     //   await console.log('设备地区:', DeviceInfo.getDeviceLocale());
        await console.log('设备名称:', DeviceInfo.getDeviceName());
        await console.log('获取应用初始安装时间:', DeviceInfo.getFirstInstallTime());
        await console.log('设备字体大小:', DeviceInfo.getFontScale());
        await console.log('剩余存储容量(字节):', DeviceInfo.getFreeDiskStorage());
      //  await DeviceInfo.getIPAddress().then(res => {
      //      console.log('设备当前网络地址IP:', res);
      //  });
      //  await console.log('应用程序实例ID:', DeviceInfo.getInstanceID());
        await console.log('获取应用上次更新时间:', DeviceInfo.getLastUpdateTime());
      //  await DeviceInfo.getMACAddress().then(res => {
      //      console.log('网络适配器MAC地址:', res);
      //  });
        await console.log('设备制造商:', DeviceInfo.getManufacturer());
        await console.log('获取JVM试图使用的最大内存量(字节):', DeviceInfo.getMaxMemory());
        await console.log('获取设备模式:', DeviceInfo.getModel());
        await console.log('获取电话号码:', DeviceInfo.getPhoneNumber());
        await console.log('获取应用程序可读版本:', DeviceInfo.getReadableVersion());
        await console.log('设备唯一序列号:', DeviceInfo.getSerialNumber());
        await console.log('获取系统名称:', DeviceInfo.getSystemName());
        await console.log('获取系统版本:', DeviceInfo.getSystemVersion());
     //   await console.log('系统时区:', DeviceInfo.getTimezone());
        await console.log('完整磁盘空间大小(字节):', DeviceInfo.getTotalDiskCapacity());
        await console.log('设备总内存(字节):', DeviceInfo.getTotalMemory());
     //   await console.log('设备唯一ID:', DeviceInfo.getUniqueID());
        await console.log('设备用户代理:', DeviceInfo.getUserAgent());
        await console.log('设备(APP)版本:', DeviceInfo.getVersion());
     //   await console.log('用户偏好是否设置为24小时格式:', DeviceInfo.is24Hour());
        await console.log('程序是否允许在模拟器中:', DeviceInfo.isEmulator());
        await console.log('是否是平板电脑:', DeviceInfo.isTablet());
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>
                    获取设备对应参数信息
                </Text>
            </View>
        );
    }
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    }
});

对应方法获取参数显示:

 

标签:info,react,console,log,await,DeviceInfo,React,native
From: https://www.cnblogs.com/dreambin/p/16873186.html

相关文章

  • Reactor与Proactor
    作者:小林coding链接:https://www.zhihu.com/question/26943938/answer/1856426252来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。Reactor......
  • 你是如何使用React高阶组件的?
    HighOrderComponent(包装组件,后面简称HOC),是React开发中提高组件复用性的高级技巧。HOC并不是React的API,他是根据React的特性形成的一种开发模式。HOC具体上就是一个接受......
  • 京东前端经典react面试题合集
    为什么调用setState而不是直接改变state?解答如果您尝试直接改变组件的状态,React将无法得知它需要重新渲染组件。通过使用setState()方法,React可以更新组件的UI。另......
  • 腾讯前端二面常考react面试题总结
    你理解“在React中,一切都是组件”这句话。组件是React应用UI的构建块。这些组件将整个UI分成小的独立并可重用的部分。每个组件彼此独立,而不会影响UI的其余部分。......
  • Winform CustomControl这样写
    WinformCustomControl这样写usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Text;us......
  • react使用体验
    我是先使用vue2,然后vue3,最后就是现在的react。这几个框架用下来,说一说我对它们的理解吧。其实严格上来说,react只是一个库。因为官网上就是这么写的:“用于构建用户界面的......
  • 7个适用于所有前端开发人员的很棒React UI 库
    英文| https://javascript.plainenglish.io/7-awesome-react-ui-libraries-for-all-frontend-developers-c7d45b7cecad翻译|小爱如今,大多数前端开发人员都在使用React......
  • React Native中的DeviceEventEmitter的使用
    react-native中采用了DeviceEventEmitter来实现对事件的监听,实现非父子关系的页面之间的通信。具体来说,我们可以在一个页面中通过DeviceEventEmitter来对特定名称的事件进......
  • React核心工作原理
    ##1.1、虚拟DOM常见问题:reactvirtualdom是什么?说一下diff算法?拿到一个问题,一般回答都是是什么?为什么?怎么办?那就按照这个思路来吧!what用JavaScript对象表示DOM......
  • React性能优化的8种方式
    一引沿Fiber架构是React16中引入的新概念,目的就是解决大型React应用卡顿,React在遍历更新每一个节点的时候都不是用的真实DOM,都是采用虚拟DOM,所以可以理解成fiber就是R......