React-Native 系列之设备权限申请

3,137 阅读3分钟

在移动开发中,出于安全考虑,要获取设备的相应权限,需要通过权限请求,用户通过之后才能获取权限。Android 和 IOS 的获取权限方式不同。

Android 权限申请

在低于 Android 6.0 的设备上,权限只要写在 AndroidManifest.xml 里就会自动获得。但是在 Android 6.0 之后,Google 认为涉及 “危险和用户隐私” 的一些权限不仅要做清单文件,还要单独调用API,让用户选择是否同意你申请这个权限。

权限申请清单文件:

在开发环境配置:android/app/src/debug/AndroidManifest.xml

在生产环境配置:android/app/src/main/AndroidManifest.xml

在 React Native 中,提供了一个 PermissionAndroid 的模块,可以访问 Android M(也就是 6.0) 开始提供的权限模型。有一些权限写在AndroidManifest.xml就可以在安装时自动获得,但有一些“危险”的权限则需要弹出提示框供用户选择。

PermissionAndroid 模块使用

配置 AndroidManifest.xml 文件

在使用 PermissionAndroid 模块申请权限前,我们需要先在清单文件 AndroidManifest.xml 中配置需要申请的权限。例如我们申请手机相机的权限:

// 这里需要申请什么权限就配置什么权限
<uses-permission android:name="android.permission.CAMERA"/>

如果要申请多个权限,例如还需要申请定位及读取联系方式的权限,则在 AndroidManifest.xml 中配置多个权限:

// 这里需要申请什么权限就配置什么权限
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

调用API获取权限

在 AndroidManifest.xml 中配置完需要申请的权限后,还需要调用 PermissionAndroid 模块提供的API来请求权限。PermissionAndroid 模块提供了 check、request、requestMultiple 三个方法来请求权限。

check()

check(permission)

check 方法检查某项权限是否经过用户授权。返回一个 Promise,解析为一个 布尔值。

request()

request(permission, [rationale])

request 方法弹出提示框向用户请求某项权限。参数 permission 为一个字符串;返回值为一个 Promise,最终值为 PermissionAndroid.RESULTS 中的值

requestMultiple()

requestMultiple(permissions);

requestMultiple 方法在一个弹出框中向用户请求多个权限。参数 permissions 为一个数组,返回值为一个 object,key 为各权限名称,值为 PermissionAndroid.RESULTS 中的值。

PermissionsAndroid.RESULTS

  • GRANTED: 'granted', 表示用户已授权
  • DENIED: 'denied', 表示用户已拒绝
  • NEVER_ASK_AGAIN: 'never_ask_again',表示用户已拒绝,且不愿被再次询问

下面,我们以申请手机相机和定位权限为例,调用 requestMultiple 方法向用户请求多个权限。看如下代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  PermissionsAndroid,
  Platform
} from 'react-native';

import { Colors } from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  const [permissionsGranted, setPermissionsGranted] = useState(false);

  const requestPermission = async () => {
    try {

      // 要使请求权限功能生效,需在 AndroidManifest.xml 文件中配置需要请求的权限

      // 权限列表
      const permissions = [
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        PermissionsAndroid.PERMISSIONS.CAMERA
      ]

      if (Platform.OS === 'android') {
        //  PermissionsAndroid.requestMultiple 向用户请求多个权限
        const results = await PermissionsAndroid.requestMultiple(permissions)
        // 返回值为一个 object,key 为各权限名称,值为PermissionsAndroid.RESULTS
        const allPermissionsGranted = Object.values(results).every(result => result === PermissionsAndroid.RESULTS.GRANTED);
        if (allPermissionsGranted) {
          setPermissionsGranted(true)
        }
      } else {
        setPermissionsGranted(false)
      }
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <View style={styles.body}>
    <View style={styles.container}>
        <Text style={styles.item}>{permissionsGranted ? '已授权' : '未授权'}</Text>
        <Button title="请求权限" onPress={requestPermission} />
    </View>
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    backgroundColor: Colors.white,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {

  }
});

export default App;

本文先介绍 Android 的权限申请,IOS 的权限申请将在下一篇文章中介绍。