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

文章目录

    • 一、前言
    • 二、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.hqwc.cn/news/111904.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【接口测试】HTTP接口详细验证清单

概述 当我们在构建、测试、发布一套新的HTTP API时&#xff0c;包括我在内的大多数人都不知道他们所构建的每一个组件的复杂性和细微差别。 即使你对每一个组件都有深刻的理解&#xff0c;也可能会有太多的信息在你的脑海中出现。 以至于我们不可能一下把所有的信息进行梳理…

2023年墨西哥 SP/BMV IPC 研究报告

第一章 指数概况 1.1 指数基本情况 墨西哥 S&P/BMV IPC 指数衡量在墨西哥证券交易所 (Bolsa Mexicana de Valores, BMV)上市&#xff0c;规模最大、流动性最高的股票表现。提供一个覆盖墨西哥股市的广泛、具有代表性且可轻易复制的指数。根据多元化要求&#xff0c;按市值…

100道基于Android毕业设计的选题题目,持续更新

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 大家好&#xff0c;我是程序员徐师兄、今天给大家谈谈基于android的app开发毕设题目&#xff0c;以及基于an…

前端html原生页面兼容多端H5和移动端适配方案

目录 图片代码最后 图片 是一个注册页面 代码 自己查看效果 注意: 单位全部用rem这样才能保证兼容性适配多端&#xff0c;px转rem转换公式 1px 1/37.5rem 所以想要20px应该对应20/37.5 0.53rem <!DOCTYPE html> <html lang"en"><head><met…

小程序中使用分包

前言 小程序在未使用的分包的情况下仅支持大小为2M,如果图片等资源过多的情况下可以使用分包功能&#xff0c;使用分包的情况下单个分包大小不能超过2M,总大小不能超过20M&#xff0c;分包有两种情况&#xff1a;普通分包和独立分包&#xff0c;下面介绍的是普通分包。官方文档…

CANoe-Model Editor无法修改ARXML文件的问题、E2E在SOME/IP通信中的使用问题

1、Model Editor无法修改ARXML文件的问题 在CANoe 15软件版本中,Communication Setup导入arxml文件后,可以在model editor中打开arxml并修改配置。关闭model editor后再打开,可以看到修改的配置被保存了。 但是,当我把arxml文件从Communication Setup中移除后,再导入。此…

开启编程之门

自我介绍 目前已经大二了&#xff0c;计算机专业在读&#xff0c;是一个热爱编程&#xff0c;做事踏实专注的人。转眼间一年已经过去了&#xff0c;也接触编程一年了&#xff0c;但开始并没有对所学所想进行很好的总结和输出&#xff0c;这一年也有了新的很多感悟与心得&#x…

ArcGIS标注的各种用法和示例

标注是将描述性文本放置在地图中的要素上或要素旁的过程。 本文整理了ArcGIS中的各种标注方法、可能遇到的问题和细节,内容比较杂,想到哪写到哪。 一、正常标注某一字段值的内容 右键点击【属性】,在【标注】选项卡下勾选【标注此图层中的的要素】,在【文本字符串】栏中…

Vue 使用vue-pdf 显示pdf文件 切换页面 缩放 全屏 自动播放等

<template><div id"container"><!-- 上一页、下一页--><div class"right-btn"><div click"toFullOrExit" class"turn-btn"><span>{{ isFull 1 ? "取消全屏" : "全屏" }}&l…

Vue3 Ajax(axios)异步

文章目录 Vue3 Ajax(axios)异步1. 基础1.1 安装Ajax1.2 使用方法1.3 浏览器支持情况 2. GET方法2.1 参数传递2.2 实例 3. POST方法4. 执行多个并发请求5. axios API5.1 传递配置创建请求5.2 请求方法的别名5.3 并发5.4 创建实例5.5 实例方法5.6 请求配置项5.7 响应结构5.8 配置…

7.idea 使用 docker 构建 spring boot 项目

本文目录 step 1&#xff1a;编写 Dockerfile 文件step 2&#xff1a;pom.xml 中添加如下配置step 3&#xff1a;maven仓库 setting.xml <servers> 模块下&#xff0c;添加访问自定义仓库的用户名&#xff0c;密码step 4&#xff1a;使用 maven命令开始 clean、packagest…

2023年华为杯研究生数学建模竞赛辅导

2023年华为杯研究生数学建模竞赛辅导 各研究生培养单位&#xff1a; 中国研究生数学建模竞赛作为教育部学位管理与研究生教育司指导&#xff0c;中国学位与研究生教育学会、中国科协青少年科技中心主办的“中国研究生创新实践系列大赛”主题赛事之一&#xff0c;是一项面向在校…