Codex 斜杠指令体系与业务场景调度实战

React Native 做相机、定位、相册、推送权限管理,推荐不要自己封装 Native 权限,而是统一使用:

react-native-permissions

它统一封装 iOS / Android 权限申请、检查、跳转设置等流程。(NPM)

整体流程:

sql 复制代码
用户操作
   ↓
业务功能触发
   ↓
check权限
   ↓
未授权 → request权限
   ↓
granted → 执行业务
denied → 提示原因
blocked → 引导打开系统设置

1. 安装

bash 复制代码
npm install react-native-permissions

cd ios
pod install

(NPM)


一、相机权限 Camera

Android

android/app/src/main/AndroidManifest.xml

ini 复制代码
<uses-permission android:name="android.permission.CAMERA"/>

iOS

Info.plist

vbnet 复制代码
<key>NSCameraUsageDescription</key>
<string>需要使用相机拍摄照片</string>

RN代码

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


async function requestCamera(){

 const result = await request(
   PERMISSIONS.IOS.CAMERA
 );

 if(result === RESULTS.GRANTED){
    console.log("可以使用相机");
 }

 if(result === RESULTS.BLOCKED){
    console.log("去设置开启");
 }
}

Android:

scss 复制代码
request(
 PERMISSIONS.ANDROID.CAMERA
)

二、定位权限 Location

Android

Manifest:

ini 复制代码
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

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

iOS

Info.plist:

vbnet 复制代码
<key>NSLocationWhenInUseUsageDescription</key>

<string>用于获取当前位置</string>

如果后台定位:

vbnet 复制代码
<key>NSLocationAlwaysUsageDescription</key>

<string>后台需要持续定位</string>

代码:

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


async function requestLocation(){

const res = await request(
 PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
)


if(res === RESULTS.GRANTED){

 console.log("定位成功")

}

}

Android:

scss 复制代码
request(
 PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
)

三、相册权限 Photo Library

Android 13+

需要:

ini 复制代码
<uses-permission 
android:name="android.permission.READ_MEDIA_IMAGES"/>

Android 12:

ini 复制代码
<uses-permission 
android:name="android.permission.READ_EXTERNAL_STORAGE"/>

iOS

Info.plist:

vbnet 复制代码
<key>NSPhotoLibraryUsageDescription</key>

<string>用于选择图片</string>

代码:

scss 复制代码
request(
 PERMISSIONS.IOS.PHOTO_LIBRARY
)

Android:

scss 复制代码
request(
 PERMISSIONS.ANDROID.READ_MEDIA_IMAGES
)

四、推送权限 Notification

推送比较特殊。

需要:

  • 系统通知权限
  • APNs / FCM 注册
  • 推送 Token

推荐:

@react-native-firebase/messaging


iOS

请求通知:

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


async function notificationPermission(){

const result =
 await requestNotifications([
   'alert',
   'sound',
   'badge'
 ]);

console.log(result.status)

}

(NPM)


Android 13+

Manifest:

ini 复制代码
<uses-permission
android:name="android.permission.POST_NOTIFICATIONS"/>

请求:

scss 复制代码
request(
 PERMISSIONS.ANDROID.POST_NOTIFICATIONS
)

五、统一权限管理封装

实际项目一般这样写:

css 复制代码
src
 └── permissions
       ├── camera.js
       ├── location.js
       ├── photo.js
       └── notification.js

例如:

permission.js

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


export async function checkPermission(permission){

 const result =
 await request(permission);


 switch(result){

 case RESULTS.GRANTED:
   return true;


 case RESULTS.BLOCKED:

   //打开设置
   return false;


 default:

   return false;

 }

}

业务调用:

scss 复制代码
const ok =
 await checkPermission(
   PERMISSIONS.IOS.CAMERA
 )


if(ok){

 openCamera()

}

六、推荐权限申请时机

不要 App 启动一次申请全部:

❌

makefile 复制代码
打开APP

请求:
相机
定位
相册
通知

用户疯狂点拒绝

体验很差。


推荐:

相机

用户点击:

复制代码
扫一扫
拍照上传

再请求。


定位

进入地图页面:

复制代码
附近的人
附近商家
导航

请求。


相册

点击:

复制代码
上传图片

请求。


通知

登录完成 / 引导页:

复制代码
开启通知,及时收到消息

请求。


七、生产级权限状态处理

建议封装:

状态 处理
GRANTED 直接使用
DENIED 再次request
BLOCKED 弹窗,引导系统设置
LIMITED(iOS) 提示用户选择更多权限
UNAVAILABLE 设备不支持

react-native-permissions 本身提供这些状态。(NPM)


八、常见 RN APP 权限架构

类似微信:

lua 复制代码
App启动
 |
 |-- 初始化SDK
 |
 |-- 登录
 |
 |-- 用户进入功能
        |
        +-- 扫一扫
        |      |
        |      Camera Permission
        |
        +-- 发朋友圈
        |      |
        |      Photo Permission
        |
        +-- 附近
        |      |
        |      Location Permission
        |
        +-- 消息提醒
               |
               Notification Permission

这样通过率和用户体验最好。

如果是 RN 新架构(Fabric + TurboModule)项目,权限层建议独立成 Native Module Service,不要散落在页面组件里。

相关推荐
jktantan9 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
2601_9628857210 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel10 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓10 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人10 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every10 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad11 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新12 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易12 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员
风骏时光牛马13 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端