`react-native-permissions` 教程

react-native-permissions 教程

项目地址:https://gitcode.com/gh_mirrors/rea/react-native-permissions

本教程将指导您了解并安装 react-native-permissions 库，这是一个统一的权限API，用于React Native在iOS、Android和Windows上的应用。

1. 项目目录结构及介绍

react-native-permissions 的基本目录结构通常如下：

.
├── android                # Android相关代码
│   └── src                # 包含原生模块
├── ios                    # iOS相关代码
│   ├── Pods               # CocoaPods依赖管理
│   └── Supporting Files   # iOS项目支持文件
├── jest.setup.js          # Jest配置
├── lib                    # JavaScript库代码
├── node_modules           # 所有npm依赖
└── package.json           # 项目包信息

• android: 包含了适用于Android平台的所有原生代码。
• ios: 包含适用于iOS平台的所有原生代码，包括Podfile和CocoaPods管理的第三方库。
• jest.setup.js: Jest测试环境的配置文件。
• lib: JavaScript部分的源码，提供给React Native应用程序调用的接口。
• package.json: 项目的主要配置文件，包含了依赖列表和其他项目信息。

2. 项目启动文件介绍

由于react-native-permissions 是一个库而不是独立的应用程序，没有特定的启动文件。不过，在您的React Native项目中引入此库后，您可以参考以下例子来使用它：

import { PermissionsAndroid, Platform } from 'react-native';
import * as Permissions from 'react-native-permissions';

async function requestPermission() {
  let result;

  if (Platform.OS === 'android') {
    result = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Cool App Camera Permission',
        message:
          'Cool App needs access to your camera ' +
          'so you can take awesome pictures.',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      }
    );
  } else {
    result = await Permissions.request('camera');
  }

  if (result === 'granted') {
    // 用户已授权，执行相应操作
  } else {
    // 用户未授权，可能提示或处理错误
  }
}

// 调用请求权限的方法
requestPermission();

在这个例子中，我们演示了如何请求相机权限。在iOS上使用 Permissions.request() ，而在Android上使用 PermissionsAndroid.request()。

3. 项目的配置文件介绍

iOS 配置

在iOS项目中，react-native-permissions 使用CocoaPods进行管理。你需要在你的Podfile里添加以下配置：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native-modules'

platform :ios, '10.0'

target 'YourTargetName' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # To enable hermes on iOS, change `false` to `true` and uncomment the Hermes lines below
    :hermes_enabled => false
  )

  pod 'react-native-permissions', :path => '../node_modules/react-native-permissions'
end

然后运行 pod install 来安装依赖。

Android 配置

在Android项目中，你需要在android/app/src/main/java/com/yourcompany/yourapp/MainApplication.java 文件中导入并注册 RNPermissionsPackage：

import com.zoontek.rnpermissions.RNPermissionsPackage; // 添加这行

public class MainApplication extends Application implements ReactApplication {

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // ...其他代码...
    packages.add(new RNPermissionsPackage()); // 添加这行
    return packages;
  }

  // ...其他代码...
}

完成以上步骤后，你的React Native应用就可以使用react-native-permissions库来管理设备的各种权限了。记得在使用任何权限之前，先检查权限状态并适当地请求用户授权。

react-native-permissions 项目地址: https://gitcode.com/gh_mirrors/rea/react-native-permissions