在React Native中管理应用程序的权限

前端小工
3,123 阅读7分钟

当你开发一个具有高级功能的移动应用程序时，你很可能需要得到用户的许可。

为了保护用户，应用程序不应该能够直接访问用户的相机、麦克风、位置等。我们需要尊重用户的隐私，在采集和存储照片、音频和视频时要寻求许可。

让我们在Facebook上检查一下，看看摄像头权限的例子。你对这些警报很熟悉，对吗？

FB Camera Access Permission

为了能够充分展示你的应用程序，你的用户必须给予许可。但如果用户拒绝了呢？正如你可能猜到的，你不能提供这个功能。因此，权限是必不可少的。

如果我们正在开发一个照片编辑应用程序呢？解决办法很简单：我们需要获得他们的许可来访问他们的数据。在这篇文章中，我们将深入探讨权限，以及我们如何通过使用zoontek的react-native-permissions库在React Native中获得权限。

React-native-permissions库🐝

不幸的是，React Native并不支持获取权限。幸运的是，有一个流行的第三方库我们可以使用。Mathieu Acthernoene的 react-native-permissions 库。

让我们假设我们想询问相机的权限。步骤很容易做到。

💡 首先，确保你将这个库添加到项目中。

$ npm install --save react-native-permissions
--or--
$ yarn add react-native-permissions

然后，一定要在文件的顶部写上你要处理这些权限的地方，从而导入这个库。

import * as permissions from 'react-native-permissions';
// you may also import just the functions or constants that you will use from this library
import {request, PERMISSIONS} from 'react-native-permissions';

react-native-permissions for iOS devices

  • 请确保将所有需要的权限添加到你的应用程序的Podfile ，并运行此命令：

    pod install
    • CocoaPods是一个用于Swift和Objective-C Cocoa项目的依赖管理器。Podfile 是一个规范，描述了一个或多个Xcode项目的目标的依赖性。运行pod install ，可以帮助你安装这些依赖性。你可以在这里查看CocoaPods来阅读更多内容。

→ 在我们的例子中，我们将添加

pod 'Permission-Camera', :path => "#{permissions_path}/Camera"

到Podfile 并运行pod install 。

  • 用想要的权限使用说明更新Info.plist 。你可以通过两种方式实现这一点；选择适合你的方式。

选项1：Xcode

  • 打开 "信息 "部分
  • 添加一个新行
  • 从选项中选择你想要的权限作为一个键
  • 为该键添加值

→ 在我们的案例中，我们将选择隐私 - 相机使用说明。

Xcode Privacy Camera Usage

选项2：文本编辑器

  • 打开Info.plist 文件
  • 从以下内容中复制密钥和字符串值并粘贴到文件中
  • 根据你的需要更新字符串的值。
<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>     
      <!-- 🚨 Keep only the permissions used in your app 🚨 -->
      <key>NSAppleMusicUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSBluetoothAlwaysUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSBluetoothPeripheralUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSCalendarsUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSCameraUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSContactsUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSFaceIDUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationAlwaysUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationTemporaryUsageDescriptionDictionary</key>
      <dict>
        <key>YOUR-PURPOSE-KEY</key>
        <string>YOUR TEXT</string>
      </dict>
      <key>NSLocationWhenInUseUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSMicrophoneUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSMotionUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSPhotoLibraryUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSPhotoLibraryAddUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSRemindersUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSSpeechRecognitionUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSSiriUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSUserTrackingUsageDescription</key>
      <string>YOUR TEXT</string>

      <!-- … -->
    </dict>
    </plist>

→ 在我们的例子中，它是如下的。

<key>NSCameraUsageDescription</key>
    <string>YOUR TEXT</string>

🌞 第一个选项中的值部分和第二个选项中的<string> 部分对应于警报信息里面的文本。

让我们回顾一下Facebook的摄像头权限提醒。描述部分是你在这里给出的文本作为值。

FB Camera Permission Text

→ 在我们的例子中，我只是给了 "相机 "这个值，这里看起来像这样。

RN Permission Text Body

安卓的 react-native-permissions

  • 在你的应用程序的android/app/src/main/AndroidManifest.xml 文件中添加所有需要的权限。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.myawesomeapp">
      <!-- 🚨 Keep only the permissions used in your app 🚨 -->
      <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
      <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
      <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
      <uses-permission android:name="android.permission.BODY_SENSORS" />
      <uses-permission android:name="android.permission.CALL_PHONE" />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />
      <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
      <uses-permission android:name="android.permission.READ_CALENDAR" />
      <uses-permission android:name="android.permission.READ_CALL_LOG" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.READ_SMS" />
      <uses-permission android:name="android.permission.RECEIVE_MMS" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.SEND_SMS" />
      <uses-permission android:name="android.permission.USE_SIP" />
      <uses-permission android:name="android.permission.WRITE_CALENDAR" />
      <uses-permission android:name="android.permission.WRITE_CALL_LOG" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
   
      <!-- … -->

</manifest>

→ 在我们的案例中，我们只需要在AndroidManifest.xml 文件中添加相机权限。

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

请求权限：返回类型

request(Platform.OS === 'ios' ? PERMISSIONS.IOS.CAMERA : PERMISSIONS.ANDROID.CAMERA).then((result) => {
        setPermissionResult(result)
        console.log(result)
      });

返回类型和含义在这里。

Permission Return Types and Meanings

流程因操作系统的不同而不同。这里有iOS和Android的权限流程图，它取自这个库的文档。

iOS Permission FlowAndroid Permission Flow

最终产品

看吧!你已经准备好运行你的代码了!基本上，这就是了！你可能还会遇到一些问题。

你可能还是会遇到一些问题，比如你的设备不支持该功能，或者版本无效。我的建议是：你检查解决方案的第一个地方应该是库的文档。

在写这篇文章时，我建立了一个React Native应用程序的例子，其中包括相机和麦克风的权限。它显示了权限的结果和对结果的解释。

你可以玩玩它，看看结果类型，并观察该结果何时返回。你可以先批准它，然后在设置中改变权限，打开应用程序，看看会发生什么。与它一起工作才能更好地理解!

你也可以在为特定场合编码时使用该样本进行测试。除了把玩样本外，你还可以查看源代码，如果你有什么困难，可以和我的进行比较

RN Permissions Demo App

当我即将完成我的例子项目时，我发现zoontek也为这个项目做了一个例子，就像我的一样，但包括了所有的权限！你可以去看看zoontek的例子。你可以在这里查看zoontek的示例程序。

配置权限的关键点👩🏻‍💻

✨ 权限外观

请记住, 如果你回答了一个权限请求, 它就不会再要求这个权限了。如果你想让它再次出现，请删除并安装该应用。

如果你只想改变结果，你可以在设备的设置上改变它。

在iOS中，用户必须明确授予每个应用程序访问摄像头和麦克风的权限。在你的应用程序第一次使用捕捉系统之前，操作系统会显示一个警告，要求用户授予你的应用程序访问摄像头的权限。他们会记住用户对这一提示的反应，所以每次你访问用户的摄像头时，它不会重新出现。

用户可以在iOS的 "设置">"隐私 "中改变你的应用程序的权限设置，或者在Android的
"设置">"应用程序">"你的应用程序名称">"权限"。

✨ Android 11权限更新

在安卓生态系统中，有一些变化是随着安卓11而来的。

  • 如果你的应用程序请求与相机、麦克风或位置有关的权限，权限对话框包括 "仅此一次 "选项。如果选择了它，你的应用程序就会被授予一次权限。这被称为 "一次性许可"。第二次打开该应用时，权限对话框会再次出现
  • 如果你的应用程序有几个月没有被使用，系统会自动重置用户为该应用程序授予的敏感运行时权限。

想了解更多，请去看看Android 11的更新。

✨ iOS 14.5：应用跟踪透明化

对于iOS14.5、iPadOS14.5和tvOS14.5及更高版本，开发者需要征求用户的许可，以便在其他公司拥有的应用程序和网站上跟踪他们。这个库的最大特点之一是它是最新的。你可以通过使用react-native-permissions添加AppTrackingTransparency（ATT）的提示和请求。记住，只有14.5版或更新的iOS设备能够请求。

何时询问权限以获得最佳用户体验👩🏻‍🎨

在应用程序的入职培训中询问权限，还是在你需要的特定时间询问权限，仍然是一个用户体验的争论。没有一个答案；有的只是意见。

我所建议的是在你需要的时候询问。作为一个用户，在入职培训中看到所有的权限让我感到害怕，而且大多数时候我并没有给出全部的权限。正如我之前所说，这是可以讨论的。选择适合你的方式。

总结

我们已经涵盖了权限的概念，以及我们如何通过使用react-native-permissions在React Native中获得它们。我给了你在你的权限旅程中可能需要的关键点，比如Android 11和iOS 14.5的变化。你可以在这个GitHub仓库里找到我的例子项目。

我希望你喜欢这篇文章，并希望你的用户给予充分的权限，从你的应用功能中获得好处如果你有任何反馈，请随时联系我们。直到下一次，请注意!☘

参考文献

The postManaging app permissions in React Nativeappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝