ReactNative进阶(二十一)开源插件 react-native-device-info 获取设备信息

news/2024/7/15 17:23:25 标签: react native, 开源, react.js

文章目录

    • 一、前言
    • 二、Android 平台
    • 三、iOS 平台
    • 四、拓展阅读

一、前言

项目开发过程中,需要获取设备信息,例如获取设备名称。可通过使用开源的第三方组件react-native-device-info,该组件适用于iOSAndroid双平台。

ReactNative项目中可通过npm命令下载 react-native-device-info 组件依赖包:

npm install --save react-native-device-info

二、Android 平台

android需要在AndroidManifest.xml配置文件添加android.permission.BLUETOOTH权限

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

具体应用示例如下,有关更多获取设备属性方法详参 react-native-device-info。

import DeviceInfo from 'react-native-device-info';
DeviceInfo.getDeviceName()

注⚠️:官方文档指出,在调用getDeviceName()方法获取设备名称时,当版本号低于v3时,android需要在AndroidManifest.xml配置文件添加android.permission.BLUETOOTH权限,若版本号不低于v3,android.permission.BLUETOOTH权限可不添加。

DeviceInfo.getDeviceName().then((deviceName) => {
  // iOS: "Becca's iPhone 6"
  // Android: ?
  // Windows: ?
});

This used to require the android.permission.BLUETOOTH but the new implementation in v3 does not need it. You may remove that from your AndroidManifest.xml if you had it for this API. iOS 16 and greater require entitlements to access user-defined device name, otherwise a generic value is returned (ie. ‘iPad’, ‘iPhone’)

三、iOS 平台

其中,针对iOS系统为16或者更高版本,需要设置允许获取用户自定义设备名称权限,否则将获取iOS移动设备通用名称,例如 ‘iPad’, ‘iPhone’。

  1. 首先在xcode中进行初始化。

    打开xcode,找到自己的项目->Libraries文件夹,选择Add Files to ‘项目名’,然后找到当前项目目录/node_modules/react-native-device-info文件夹,找到’RNDeviceInfo.xcodeproj’文件,然后点击Add.

在这里插入图片描述
2. 在xcode中加载内库。

找到项目名字 ----> Build Phases —> Link Binary With Libraries, 点击‘+’按钮,添加‘libRNDeviceInfo.a’库。

在这里插入图片描述

  1. 继续添加环境变量

    $(SRCROOT)/../react-native/React
    $(SRCROOT)/../../React 
    

    并修改recursive

在这里插入图片描述

总结:作者曾经调用DeviceInfo.getDeviceName()方法获取设备名称,但获取值一直为undefined,曾怀疑由于手机隐私设置导致无法获取,但是其他属性却可以获取,故可排除手机隐私设置所致。经过研读插件文档,才发现自己所引用的react-native-device-info插件版本号为2.3.2,需要在AndroidManifest.xml配置文件添加android.permission.BLUETOOTH权限,而通过检查AndroidManifest.xml配置文件,发现缺少添加android.permission.BLUETOOTH权限,这才导致获取值为undefined,故通过在AndroidManifest.xml配置文件添加android.permission.BLUETOOTH权限获取到设备名称。

四、拓展阅读

  • 《react-native-device-info 插件文档》

http://www.niftyadmin.cn/n/5027101.html

相关文章

小米手机安装面具教程(Xiaomi手机获取root权限)

文章目录 1.Magisk中文网&#xff1a;2.某呼&#xff1a;3.最后一步打开cmd命令行输入的时候:4.Flash Boot 通包-Magisk&#xff08;Flash Boot通刷包&#xff09;5.小米Rom下载&#xff08;官方刷机包&#xff09;6.Magisk最新版本国内源下载 1.Magisk中文网&#xff1a; htt…

java和fastjson

1.java是如何跨平台通信的 java--->class字节码--->jvm虚拟机运行 2.使因为jvm只会读文件名 如果不一致 则无法找到文件 3.main 函数说明java代码的接口 被使用 4.java和class后缀的区别 java是当前编写的代码文件 class是编译后的文件 5.void 没有返回值 这…

开源即时通讯(IM)项目OpenIM源码部署流程

由于OpenIM依赖的组件较多&#xff0c;开发者需求不一&#xff0c;导致OpenIM部署一直被人诟病&#xff0c;经过几次迭代优化&#xff0c;包括依赖的组件compose的一键部署&#xff0c;环境变量设置一次&#xff0c;全局生效&#xff0c;以及脚本重构&#xff0c;目前OpenIM部署…

ChatGPT充值,银行卡被拒绝,图文教程

目录 前言步骤1. 魔法地址选择2. 选择手机号码(归属地)3. 勾选,服从协议4. 填写信息5. 完善账单地址6. 订阅成功前言 大家好,今天我在订阅ChatGPT4时,遭遇了银行卡被拒绝的尴尬境地。这里有个技巧,助你开心畅享ChatGPT Plus的升级版。 可SiXin我,索取详细图文教程。 …

面渣逆袭:微服务三十三问,两万字图文详解,速收藏

大家好&#xff0c;我是老三&#xff0c;面渣逆袭系列继续&#xff0c;这期给大家带来微服务相关的面试题。 概览 1.什么是微服务&#xff1f; 微服务&#xff08;Microservices&#xff09;是一种软件架构风格&#xff0c;将一个大型应用程序划分为一组小型、自治且松耦合的…

D. Cyclic Operations Codeforces Round 897 (Div. 2)

Problem - D - Codeforces 题目大意&#xff1a;有一个长度为n的数组a&#xff0c;每次操作可以选取一个长度为k的所有数互不相同的数组b&#xff0c;令a[bi]b[i%k1]&#xff0c;问能否将一个全为零的数组通过任意次操作得到a 1<k<n<1e5 思路&#xff1a;通过上述操…

WebStorm使用Element组件库

文章目录 WebStorm使用Element组件库1. webstorm使用组件库1.1 webstorm使用vue文件1.2 首先需要安装Element Plus 2. 项目完成引入---按钮组件3. 引入日历组件4. 引入走马灯组件5. image组件5.1 懒加载滚动5.2 大图预览 6. Collapse 折叠面板手风琴组件8. Descriptions 描述列…

Springboot2.7集成websocket及相关问题

1、集成websocket完整代码 导入maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 服务端代码 &#xff08;1&#xff09;注入bean Configur…