React Native 全栈开发实战班 - 原生功能集成之权限管理

在移动应用中，权限管理 是确保应用安全、合规以及保护用户隐私的重要环节。不同的平台（iOS 和 Android）有不同的权限机制，React Native 应用需要正确处理这些权限请求和权限状态。本章节将详细介绍如何在 React Native 中进行权限管理，包括常用权限类型、权限请求方法、权限状态检查以及处理权限被拒绝的情况。

1.1 权限管理概述

权限管理 是指应用在访问敏感数据或功能时，需要获得用户的授权。例如，访问相机、麦克风、位置信息、通讯录等都需要相应的权限。

常见的权限类型：

  • 相机权限（CAMERA）
  • 麦克风权限（MICROPHONE）
  • 位置权限（LOCATION）
  • 通讯录权限（CONTACTS）
  • 存储权限（STORAGE）
  • 通知权限（NOTIFICATIONS）

不同的平台对权限的管理方式有所不同：

  • iOS： 权限请求需要在 Info.plist 文件中声明，并在运行时请求用户授权。
  • Android： 权限请求需要在 AndroidManifest.xml 文件中声明，并在运行时请求用户授权（Android 6.0 及以上版本）。
1.2 使用 react-native-permissions 库

react-native-permissions 是一个跨平台的权限管理库，支持 iOS 和 Android 平台，提供了统一的 API 来处理权限请求和状态检查。

1.2.1 安装 react-native-permissions
npm install react-native-permissions

链接原生依赖（React Native 0.60 及以上版本自动链接）：

cd ios
pod install
cd ..
1.2.2 配置 iOS

在 Info.plist 文件中添加需要的权限说明。

示例：

<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄照片</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以录制音频</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问您的位置以提供定位服务</string>
1.2.3 配置 Android

在 AndroidManifest.xml 文件中添加需要的权限。

示例：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

注意： 对于 Android 6.0 及以上版本，还需要在代码中动态请求权限。

1.2.4 基本用法

检查权限状态：

import { PermissionsAndroid, Platform } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';const checkCameraPermission = async () => {if (Platform.OS === 'android') {const permission = PermissionsAndroid.PERMISSIONS.CAMERA;const granted = await PermissionsAndroid.request(permission, {title: '相机权限',message: '应用需要访问相机以拍摄照片',buttonNeutral: '稍后',buttonNegative: '取消',buttonPositive: '确定',});return granted === PermissionsAndroid.RESULTS.GRANTED;} else {const permission = PERMISSIONS.IOS.CAMERA;const result = await check(permission);return result === RESULTS.GRANTED;}
};

请求权限：

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';const requestCameraPermission = async () => {if (Platform.OS === 'android') {const permission = PermissionsAndroid.PERMISSIONS.CAMERA;const granted = await PermissionsAndroid.request(permission, {title: '相机权限',message: '应用需要访问相机以拍摄照片',buttonNeutral: '稍后',buttonNegative: '取消',buttonPositive: '确定',});return granted === PermissionsAndroid.RESULTS.GRANTED;} else {const permission = PERMISSIONS.IOS.CAMERA;const result = await request(permission);return result === RESULTS.GRANTED;}
};

示例：

import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';const PermissionExample = () => {const [cameraPermission, setCameraPermission] = useState(null);useEffect(() => {const checkPermission = async () => {const result = await check(Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA);setCameraPermission(result);};checkPermission();}, []);const handleRequestPermission = async () => {const result = await request(Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA);setCameraPermission(result);};return (<View style={styles.container}><Text style={styles.text}>Camera Permission: {cameraPermission}</Text><Button title="Request Camera Permission" onPress={handleRequestPermission} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 18,marginBottom: 10,},
});export default PermissionExample;

解释：

  • check 方法用于检查权限状态。
  • request 方法用于请求权限。
  • PERMISSIONS 提供了不同平台的权限常量。
  • RESULTS 提供了权限请求的结果常量。
1.2.5 处理权限被拒绝

当用户拒绝权限请求时，应用需要提供相应的反馈，并引导用户前往设置页面手动开启权限。以下是如何处理权限被拒绝的详细步骤：

1.2.5.1 检查权限被拒绝的原因

react-native-permissions 提供了 openSettings 方法，可以引导用户前往应用设置页面手动开启权限。但在引导用户之前，最好先检查用户是否永久拒绝了权限请求。

示例：

import { check, request, PERMISSIONS, RESULTS, openSettings } from 'react-native-permissions';const handleCameraPermission = async () => {try {const permission = Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA;const result = await check(permission);if (result === RESULTS.GRANTED) {// 权限已被授予，可以执行相机相关操作console.log('相机权限已授予');} else if (result === RESULTS.DENIED) {// 权限被拒绝，可以请求权限const requestResult = await request(permission);if (requestResult === RESULTS.GRANTED) {console.log('相机权限已授予');} else {console.log('相机权限被拒绝');}} else if (result === RESULTS.BLOCKED) {// 权限被永久拒绝，引导用户前往设置页面手动开启Alert.alert('权限被拒绝','相机权限被永久拒绝，请在设置中手动开启相机权限',[{ text: '取消', style: 'cancel' },{ text: '设置', onPress: () => openSettings() },],{ cancelable: false });}} catch (error) {console.error('权限检查失败:', error);}
};

解释：

  • RESULTS.BLOCKED 表示用户永久拒绝了权限请求，并且应用无法再次请求该权限。
  • 在这种情况下，应用需要引导用户前往设置页面手动开启权限。
1.2.5.2 引导用户前往设置页面

react-native-permissions 提供了 openSettings 方法，可以打开应用设置页面，用户可以在那里手动开启权限。

示例：

import { openSettings } from 'react-native-permissions';const handleOpenSettings = () => {openSettings().catch(() => console.warn('无法打开设置页面'));
};

完整示例：

import React from 'react';
import { View, Text, Button, StyleSheet, Platform, Alert } from 'react-native';
import { check, request, PERMISSIONS, RESULTS, openSettings } from 'react-native-permissions';const PermissionExample = () => {const handleCameraPermission = async () => {try {const permission = Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA;const result = await check(permission);if (result === RESULTS.GRANTED) {// 权限已被授予，可以执行相机相关操作Alert.alert('权限', '相机权限已授予');} else if (result === RESULTS.DENIED) {// 权限被拒绝，可以请求权限const requestResult = await request(permission);if (requestResult === RESULTS.GRANTED) {Alert.alert('权限', '相机权限已授予');} else {Alert.alert('权限', '相机权限被拒绝');}} else if (result === RESULTS.BLOCKED) {// 权限被永久拒绝，引导用户前往设置页面手动开启Alert.alert('权限被拒绝','相机权限被永久拒绝，请在设置中手动开启相机权限',[{ text: '取消', style: 'cancel' },{ text: '设置', onPress: () => openSettings() },],{ cancelable: false });}} catch (error) {console.error('权限检查失败:', error);}};return (<View style={styles.container}><Text style={styles.text}>相机权限示例</Text><Button title="请求相机权限" onPress={handleCameraPermission} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,marginBottom: 10,},
});export default PermissionExample;

解释：

  • 权限检查： 首先检查相机权限是否已被授予。
  • 权限请求： 如果权限被拒绝，则请求权限。
  • 权限被永久拒绝： 如果权限被永久拒绝，则引导用户前往设置页面手动开启权限。
1.2.5.3 权限被永久拒绝的处理

当用户永久拒绝权限请求时，应用可以：

  • 引导用户前往设置页面： 通过 openSettings 方法打开应用设置页面，用户可以在那里手动开启权限。
  • 解释权限用途： 在引导用户前往设置页面之前，最好向用户解释为什么需要该权限，以及开启权限后应用可以提供哪些功能。

示例：

const handleOpenSettings = () => {Alert.alert('开启权限','相机权限被永久拒绝，请前往设置页面手动开启相机权限，以便应用可以正常使用相机功能',[{ text: '取消', style: 'cancel' },{ text: '设置', onPress: () => openSettings() },],{ cancelable: false });
};
1.3 权限管理最佳实践
1.3.1 最小权限原则

仅请求应用实际需要的权限，避免请求不必要的权限。例如，如果应用只需要访问位置信息一次，则不需要请求始终允许的权限。

1.3.2 权限请求时机

在需要使用权限的功能之前请求权限，而不是在应用启动时一次性请求所有权限。这样可以减少用户的抵触心理，提高权限请求的成功率。

1.3.3 权限解释

在请求权限之前，向用户解释为什么需要该权限，以及开启权限后应用可以提供哪些功能。这样可以提高用户对权限请求的理解和接受度。

示例：

const handleRequestPermission = async () => {const permission = Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA;const result = await check(permission);if (result === RESULTS.GRANTED) {// 权限已被授予，可以执行相机相关操作} else if (result === RESULTS.DENIED) {// 解释权限用途Alert.alert('请求相机权限','应用需要访问相机以拍摄照片，请允许访问相机',[{ text: '取消', style: 'cancel' },{ text: '确定', onPress: () => request(permission) },],{ cancelable: false });} else if (result === RESULTS.BLOCKED) {// 权限被永久拒绝，引导用户前往设置页面Alert.alert('权限被拒绝','相机权限被永久拒绝，请在设置中手动开启相机权限',[{ text: '取消', style: 'cancel' },{ text: '设置', onPress: () => openSettings() },],{ cancelable: false });}
};
1.3.4 处理权限状态变化

应用应监听权限状态的变化，并在权限状态变化时进行相应的处理。例如，当用户手动开启权限时，应用应重新执行需要权限的功能。

示例：

useEffect(() => {const subscription = check(Platform.OS === 'android' ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA).then((result) => {setCameraPermission(result);});return () => {subscription.remove();};
}, []);

总结

本章节介绍了 React Native 中的权限管理，包括常用权限类型、权限请求方法、权限状态检查以及处理权限被拒绝的情况。通过合理处理权限请求和状态，可以提高应用的安全性和用户体验。

课后作业

  1. 实现一个包含相机权限请求和状态检查的功能模块。
  2. 练习处理权限被拒绝的情况，引导用户前往设置页面手动开启权限。
  3. 阅读 react-native-permissions 官方文档，深入了解其他权限类型和高级用法。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/18102.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux】进程字段、环境变量与进程地址空间

【Linux】进程字段、环境变量与进程地址空间

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 丢掉幻想&#xff0c;准备斗争 目录 一、查看进程字段 1.字段说明 2.进程优先级 二、环境变量 1.概念 2.指令与PATH 3.环境变…
阅读更多...
基于isSpring的PPT转换

基于isSpring的PPT转换

背景 PPT课件目前还是一项在教学中高度频繁使用的工具&#xff0c;对于在线教学就更为重要了。如何把PPT转换为在线web&#xff0c;同时保留更多的PPT特性&#xff08;动画、音效、视频&#xff09;呢&#xff1f;这里介绍一种基于iSpring的PPT转换工具。用以解决在线PPT的这一…
阅读更多...
【论文笔记】LoRA: Low-Rank Adaptation of Large Language Models

【论文笔记】LoRA: Low-Rank Adaptation of Large Language Models

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: LoRA: Low-Rank Adaptatio…
阅读更多...
RHCE的学习（21）

RHCE的学习（21）

第三章 Shell条件测试 用途 为了能够正确处理Shell程序运行过程中遇到的各种情况&#xff0c;Linux Shell提供了一组测试运算符。 通过这些运算符&#xff0c;Shell程序能够判断某种或者几个条件是否成立。 条件测试在各种流程控制语句&#xff0c;例如判断语句和循环语句中…
阅读更多...
智能购物时代：AI在电商平台的革命性应用

智能购物时代：AI在电商平台的革命性应用

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术已成为推动电商行业发展的关键力量。AI技术的应用不仅改变了电商的运营模式&#xff0c;还极大地丰富了消费者的购物体验。随着技术的不断进步&#xff0c;AI在电商领域的应用越来越广泛&#xff0c;从个性…
阅读更多...
【Linux】环境变量

【Linux】环境变量

目录 一、什么是环境变量: 1、系统命令搜索路径&#xff08;PATH&#xff09;&#xff1a; 2、HOME&#xff1a; 3、SHELL&#xff1a; 4、添加环境变量&#xff1a; 二、通过代码获取环境变量&#xff1a; 三、主函数参数&#xff1a; argc表&#xff1a; envp表&…
阅读更多...
28.＜Spring博客系统④（使用MD5摘要算法对数据库密码进行加密）＞

28.＜Spring博客系统④（使用MD5摘要算法对数据库密码进行加密）＞

密码算法简介 1.对称加密算法&#xff1a;加密和解密算法一样 2.非对称加密算法&#xff1a;公钥加密、私钥解密 3.摘要算法&#xff1a;不能解密&#xff0c;不可逆 简单介绍了解一下&#xff1a; 一、对称密码算法 是指加密秘钥和解密秘钥相同的密码算法. 常见的对称密码算法…
阅读更多...
如何用GPT-4o解读视频

如何用GPT-4o解读视频

OpenAI在去年推出的GPT-4V已经支持了多模态识别&#xff0c;但一直仅限于图片输入&#xff0c;不支持视频。相比之下&#xff0c;Google的Gemini早已支持视频识别。最近&#xff0c;我司业务场景中出现了一个需要识别视频的需求&#xff0c;而我们只采购了GPT-4o模型。这就引发…
阅读更多...
计算机毕业设计Python美食推荐系统 美团爬虫 美食可视化 机器学习 深度学习 混合神经网络推荐算法 Hadoop Spark 人工智能 大数据毕业设计

计算机毕业设计Python美食推荐系统 美团爬虫 美食可视化 机器学习 深度学习 混合神经网络推荐算法 Hadoop Spark 人工智能 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
华为HCIP——MSTP/RSTP与STP的兼容性

华为HCIP——MSTP/RSTP与STP的兼容性

一、MSTP/RSTP与STP的兼容性的原理&#xff1a; 1.BPDU版本号识别&#xff1a;运行MSTP/RSTP协议的交换机会根据收到的BPDU&#xff08;Bridge Protocol Data Unit&#xff0c;桥协议数据单元&#xff09;版本号信息自动判断与之相连的交换机的运行模式。如果收到的是STP BPDU…
阅读更多...
vim配置 --＞ 在创建的普通用户下

vim配置 --＞ 在创建的普通用户下

在目录/etc/ 下面&#xff0c;有个名为vimrc 的文件&#xff0c;这是系统中公共的vim配置文件对所有用户都有效 我们现在创建一个普通用户 dm 创建好以后&#xff0c;我们退出重新链接 再切换到普通用户下 再输入密码&#xff08;是不显示的&#xff0c;输入完后&#xff0c;…
阅读更多...
Vue通过file控件上传文件到Node服务器

Vue通过file控件上传文件到Node服务器

功能&#xff1a; 多文件同步上传、拖动上传、实时上传进度条、上传前的删除文件、原生file控件的美化 搁置的功能: 取消上传(上传过程中取消,即取消网络请求abort)、上传文件夹、大文件切片、以及很多限制条件未处理(重复上传、文件格式。。。) bug: 文件总大小(。。。竟然从d…
阅读更多...
VScode学习前端-01

VScode学习前端-01

小问题合集&#xff1a; vscode按&#xff01;有时候没反应&#xff0c;有时候出来&#xff0c;是因为------>必须在英文状态下输入&#xff01; 把鼠标放在函数、变量等上面&#xff0c;会自动弹出提示&#xff0c;但挡住视线&#xff0c;有点不习惯。 打开file->pre…
阅读更多...
Qwen2.5-3B-Instruct-GGUF部署

Qwen2.5-3B-Instruct-GGUF部署

注册账号&#xff1a; 魔搭社区 等一会&#xff1a; 部署好了&#xff1a; 立即使用&#xff1a; 您部署的服务提供OpenAI API接口&#xff0c;可通过OpenAI SDK进行调用。请确保您的服务处于正常运行状态&#xff0c;并预先安装OpenAI SDK: pip install openai 在本地新建…
阅读更多...
数据库管理-第262期 崖山：知其不可而为之（20241116）

数据库管理-第262期 崖山：知其不可而为之（20241116）

数据库管理262期 2024-11-16 数据库管理-第262期 崖山&#xff1a;知其不可而为之&#xff08;20241116&#xff09;1 崖山之名2 绝地反击3 不止崖山总结 数据库管理-第262期 崖山&#xff1a;知其不可而为之&#xff08;20241116&#xff09; 作者&#xff1a;胖头鱼的鱼缸&am…
阅读更多...
C语言：指针的变量运算及数组指针

C语言：指针的变量运算及数组指针

1、指针的变量运算 指针变量保存的是地址&#xff0c;二地址本质上是一个整数&#xff0c;所以指针变量可以进行部分运算&#xff0c;列如加法减法、比较等&#xff0c;请看下面的代码&#xff1a; 1. #include <stdio.h> 2. 3. int main(){ 4. int a 10, *pa &a…
阅读更多...
【高德地图】基本使用教程（玩转地图）（vue2+vue3）

【高德地图】基本使用教程（玩转地图）（vue2+vue3）

简介 带大家一步步实现地图显示特定位置&#xff0c;或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。 本教程适合初学者。 一、获取使用高德api的key 打开高德开发平台&#xff0c;登录后&#xff0c;鼠标覆盖右上角头像&#…
阅读更多...
统信UOS开发接口DTK

统信UOS开发接口DTK

DTK（Development ToolKit）是基于 Qt 开发的简单且实用的通用开发框架。提供丰富的开发接口与支持工具，能有效提升开发效率。 文章目录 一、简介DTK 常见模块介绍概述二、框架创建开发环境准备使用 cmake三、常见模块窗口和对话框一、简介 DTK 常见模块介绍 概述 DTK（Dev…
阅读更多...
转轮数组（C语言实现）

转轮数组（C语言实现）

题目介绍 方法一我们可以先把数字1 2 3 4逆转一下&#xff0c;第二步我们可以逆转一下5 6 7&#xff0c; 最后整体逆置一下就会变成上面的数字。 void reverse(int* nums, int begin, int end) {while (begin < end){int tmp nums[begin];nums[begin] nums[end];nums[en…
阅读更多...
云端弹性计算公式有哪些内容？

云端弹性计算公式有哪些内容？

云端弹性计算公式有哪些内容&#xff1f;云端弹性计算公式涵盖资源分配、性能监控、自动伸缩及积分计算等方面。资源分配依据虚拟机配置和实际需求动态调整&#xff1b;性能监控实时监控CPU、内存等关键指标&#xff1b;自动伸缩根据预设阈值自动调整虚拟机数量&#xff1b;积分…
阅读更多...
最新文章

Copyright @ 2022~2023