RN中如何处理权限申请(相机、相册、定位、存储)?使用第三方库还是原生封装?

在 React Native(RN)里处理权限申请,本质上有两条路:

一、推荐方案:使用第三方库(更省心 ✅)

最主流的是 👉 react-native-permissions

为什么推荐它?

  • 一套 API 统一处理 iOS + Android
  • 覆盖:相机 / 相册 / 定位 / 麦克风 / 通讯录等
  • 自动处理不同系统版本差异(特别是 Android 10+、13+)

安装

csharp 复制代码
yarn add react-native-permissions

iOS 还需要:

bash 复制代码
cd ios && pod install

基本用法(以相机为例)

javascript 复制代码
import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import {Platform} from 'react-native';

export async function requestCameraPermission() {
  const permission =
    Platform.OS === 'ios'
      ? PERMISSIONS.IOS.CAMERA
      : PERMISSIONS.ANDROID.CAMERA;

  const result = await request(permission);

  switch (result) {
    case RESULTS.GRANTED:
      console.log('已授权');
      break;
    case RESULTS.DENIED:
      console.log('用户拒绝');
      break;
    case RESULTS.BLOCKED:
      console.log('被永久拒绝,需要引导去设置页');
      break;
  }
}

常见权限对应表

功能 iOS Android
相机 CAMERA CAMERA
相册 PHOTO_LIBRARY READ_MEDIA_IMAGES(Android 13+)
定位 LOCATION_WHEN_IN_USE ACCESS_FINE_LOCATION
存储 自动 READ/WRITE_EXTERNAL_STORAGE(已逐步废弃)

跳转系统设置页(很重要)

javascript 复制代码
import {openSettings} from 'react-native-permissions';

openSettings();

二、官方原生 API(不推荐做主方案 ❌)

RN 自带:

👉 PermissionsAndroid(仅 Android)

javascript 复制代码
import {PermissionsAndroid} from 'react-native';

await PermissionsAndroid.request(
  PermissionsAndroid.PERMISSIONS.CAMERA
);

问题:

  • ❌ iOS 不支持(需要自己写 Native)
  • ❌ Android 版本适配麻烦(13+权限拆分)
  • ❌ 代码分散,难维护

三、什么时候用"原生封装"?🤔

只有这些情况才建议:

✅ 场景

  • 需要深度定制(比如蓝牙、后台定位)
  • 使用原生 SDK(高德 / 百度定位)
  • 公司有统一权限中间层

❌ 不建议

  • 普通业务(拍照、选图、定位)
  • 中小项目

四、最佳实践(很关键🔥)

1️⃣ 封装统一权限工具

javascript 复制代码
// permission.ts
export async function requestPermission(type: 'camera' | 'photo' | 'location') {
  // 内部统一处理
}

👉 避免业务代码到处写权限逻辑


2️⃣ 权限申请时机

不要一进 App 就申请 ❌

👉 要"用到时再申请" ✅

例如:

  • 点击"拍照" → 再申请相机权限
  • 点击"上传头像" → 再申请相册

3️⃣ 权限被拒绝的处理

php 复制代码
if (result === RESULTS.BLOCKED) {
  Alert.alert(
    '需要权限',
    '请前往设置开启权限',
    [
      {text: '取消'},
      {text: '去设置', onPress: openSettings}
    ]
  );
}

4️⃣ Android 13+ 注意点 ⚠️

存储权限拆分为:

  • READ_MEDIA_IMAGES
  • READ_MEDIA_VIDEO
  • READ_MEDIA_AUDIO

👉 用旧的 READ_EXTERNAL_STORAGE 会失效


五、总结(给你一个明确建议)

👉 90% 场景建议:

  • 用 👉 react-native-permissions
相关推荐
A923A2 小时前
【从零开始学 React | 第四章】useEffect和自定义Hook
前端·react.js·fetch·useeffect
LIO3 小时前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
百撕可乐4 小时前
WenDoraAi官网NextJS实战03:项目插件与Header组件
react.js·js
英俊潇洒美少年5 小时前
Vue Hook 与 React Hook 全面解析:区别、用法、实战及避坑指南
前端·vue.js·react.js
PD我是你的真爱粉5 小时前
AI Agent 完全指南:LangChain Agent、ReAct、Copilot-Agent 模式、Manus、Computer Use 与记忆机制
人工智能·react.js·langchain
英俊潇洒美少年5 小时前
Vue3 实现 AI 流式打字机(SSE+时间切片模拟 React 并发)工程化完整版
前端·人工智能·react.js
光影少年5 小时前
Android和iOS原生开发的基础知识对RN开发的重要性,RN打包发布时原生端需要做哪些配置?
android·前端·react native·react.js·ios
英俊潇洒美少年5 小时前
迷你 React 调度器(带优先级+时间切片)手写实现
前端·javascript·react.js