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

🕗 发布于 2024-11-18 07:22 react native react.js javascript

在移动应用中，权限管理 是确保应用安全、合规以及保护用户隐私的重要环节。不同的平台（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 中的权限管理，包括常用权限类型、权限请求方法、权限状态检查以及处理权限被拒绝的情况。通过合理处理权限请求和状态，可以提高应用的安全性和用户体验。

课后作业

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

作者简介

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

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

原文地址：https://blog.csdn.net/bravekingzhang/article/details/143837328

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【网络安全面经】OSI七层模型每层都有什么协议
下一篇：依赖管理(go mod)

鸿蒙进阶篇-TextInput&TextArea和Checkbox
在鸿蒙开发中，TextInput 用于单行文本输入，TextArea 用于多行文本输入，Checkbox 则是用于多项选择的复选框组件。
阅读更多2024-11-21
MySQL45讲第二十六讲备库为什么会延迟好几个小时？——阅读总结
在MySQL数据库的主备架构中，备库延迟是一个需要重点关注的问题。它可能影响系统的可用性和数据的一致性，尤其是在主库压力较大时，备库延迟可能达到数小时甚至永远无法追上主库。今天，我们将深入探讨MySQ
阅读更多2024-11-21
快速简单的视频下载器——lux
在学习之余，发现了一个简单并且高效的视频下载器lux,能够帮你快速且高效的下载文件（不仅仅是视频可以），所以写了一篇博客分享lux的相关内容这个简单并且高效的视频下载器lux，一定会提高你的下载效率的
阅读更多2024-11-21
XGBOOST、LightGBM、CATBoost
本文介绍了三种 GBDT 的优化算法，可以根据实际情况进行选择。
阅读更多2024-11-21
【JAVA】Java基础—面向对象编程：常用API与数据结构—字符串、数组的使用
在Java编程中，字符串和数组是两个非常基础且重要的数据结构。它们在日常开发中无处不在，理解它们的使用及其背后的理论知识是成为一名合格Java开发者的必经之路。：可以将字符串比作一本书的章节。每个章节
阅读更多2024-11-21
Docker-Compose 快速部署安装 Nginx 或其他应用
测试部署的 Nginx 是否运行正常，可以在浏览器中访问 Nginx 所在的 IP 或端口，确保能够看到默认的 Nginx 页面。（如果你安装的是 Docker CE）。将下载的 Docker-Com
阅读更多2024-11-21
微信小程序申请getlocation权限
2、如果小程序没有导航功能。可以使用wx.openLocation写一个导航页面功能，以便进行权限申请。所以需要申请getlocation权限的开启。体验版没有申请开启不影响使用，但是上线提审必须申请
阅读更多2024-11-21
(RK3566驱动开发 - 2）.IIC驱动
【代码】(RK3566驱动开发 - 2）.IIC驱动。
阅读更多2024-11-21
04 搭建linux驱动开发环境
虽然 petalinux 功能很全面，但是其编译速度较慢，不适用于驱动调试阶段（因为驱动调试阶段会频繁修改驱动模块、内核、设备树等），因此本章将采用分步编译的方式来编译启动开发板所需要的各种镜像文件，
阅读更多2024-11-21
2025蓝桥杯（单片机）备赛--扩展外设之NE555的使用及定时器1的详细讲解（十）
超详细的定时器555讲解
阅读更多2024-11-21

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

1.1 权限管理概述

1.2 使用 react-native-permissions 库

1.2.1 安装 react-native-permissions

1.2.2 配置 iOS

1.2.3 配置 Android

1.2.4 基本用法

1.2.5 处理权限被拒绝

1.2.5.1 检查权限被拒绝的原因

1.2.5.2 引导用户前往设置页面

1.2.5.3 权限被永久拒绝的处理

1.3 权限管理最佳实践

1.3.1 最小权限原则

1.3.2 权限请求时机

1.3.3 权限解释

1.3.4 处理权限状态变化

总结

课后作业

作者简介

相关文章

1.2 使用 `react-native-permissions` 库

1.2.1 安装 `react-native-permissions`