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`

bash 复制代码

npm install react-native-permissions

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

bash 复制代码

cd ios
pod install
cd ..

1.2.2 配置 iOS

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

示例：

xml 复制代码

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

1.2.3 配置 Android

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

示例：

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 基本用法

检查权限状态：

javascript 复制代码

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;
  }
};

请求权限：

javascript 复制代码

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;
  }
};

示例：

javascript 复制代码

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 方法，可以引导用户前往应用设置页面手动开启权限。但在引导用户之前，最好先检查用户是否永久拒绝了权限请求。

示例：

javascript 复制代码

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 方法，可以打开应用设置页面，用户可以在那里手动开启权限。

示例：

javascript 复制代码

import { openSettings } from 'react-native-permissions';

const handleOpenSettings = () => {
  openSettings().catch(() => console.warn('无法打开设置页面'));
};

完整示例：

javascript 复制代码

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

示例：

javascript 复制代码

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

1.3 权限管理最佳实践

1.3.1 最小权限原则

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

1.3.2 权限请求时机

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

1.3.3 权限解释

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

示例：

javascript 复制代码

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 处理权限状态变化

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

示例：

javascript 复制代码

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 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

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

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`