React Native Vision Camera 快速入门指南

秋或依

于 2025-06-05 09:03:20 发布

阅读量256

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00035/article/details/148440583

React Native Vision Camera 快速入门指南

react-native-vision-camera 📸 A powerful, high-performance React Native Camera library. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-vision-camera

前言

React Native Vision Camera 是一个功能强大的 React Native 相机库，提供了高性能的相机功能和丰富的 API。本文将带你快速了解如何集成和使用这个库。

环境要求

在开始之前，请确保你的开发环境满足以下要求：

iOS 12 或更高版本
Android SDK 21 或更高版本
React Native 或 Expo 项目

安装步骤

根据你的项目类型选择适当的安装方式：

React Native 项目安装

npm install react-native-vision-camera
cd ios && pod install

Expo 项目安装

npx expo install react-native-vision-camera

安装完成后，需要进行一些配置才能正常使用相机功能。

权限配置

相机和麦克风是敏感权限，需要在应用配置中声明。

iOS 配置

在项目的 Info.plist 文件中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) 需要访问您的相机</string>

<!-- 如果需要录音功能 -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) 需要访问您的麦克风</string>

Android 配置

在 AndroidManifest.xml 文件中添加：

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

<!-- 如果需要录音功能 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Expo 项目配置

在 Expo 配置文件中添加插件：

{
  "plugins": [
    [
      "react-native-vision-camera",
      {
        "cameraPermissionText": "$(PRODUCT_NAME) 需要访问您的相机",
        "enableMicrophonePermission": true,
        "microphonePermissionText": "$(PRODUCT_NAME) 需要访问您的麦克风"
      }
    ]
  ]
}

然后运行：

npx expo prebuild
eas build

权限请求

获取相机和麦克风权限是使用该库的关键步骤。

使用 Hooks API

const { hasPermission, requestPermission } = useCameraPermission()

// 麦克风权限
const { hasPermission, requestPermission } = useMicrophonePermission()

权限状态有三种情况：

首次打开应用，hasPermission 为 false，需要调用 requestPermission()
已授权，hasPermission 为 true，可以直接使用相机
明确拒绝，需要引导用户到设置中授权

使用命令式 API

// 获取当前权限状态
const cameraPermission = Camera.getCameraPermissionStatus()
const microphonePermission = Camera.getMicrophonePermissionStatus()

// 请求权限
const newCameraPermission = await Camera.requestCameraPermission()
const newMicrophonePermission = await Camera.requestMicrophonePermission()

权限状态可能的值：

granted: 已授权
not-determined: 未请求过权限
denied: 用户明确拒绝
restricted: 设备限制（如家长控制）

使用相机组件

获取权限后，就可以使用相机组件了：

function App() {
  const device = useCameraDevice('back') // 获取后置摄像头
  const { hasPermission } = useCameraPermission()

  if (!hasPermission) return <PermissionsPage />
  if (device == null) return <NoCameraDeviceError />
  
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}