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

时间：2024-11-18 07:01:37

在移动应用中，权限管理 是确保应用安全、合规以及保护用户隐私的重要环节。不同的平台（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 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

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

相关文章