React Native调用摄像头画面及拍照和保存图片到相册全流程

今天主要做了一个demo,功能很简单,就是调用手机摄像头画面,并且可以通过按钮控制拍照以及将图片保存到手机相册的功能,接下来我将从创建项目开始一步一步完成这个demo,各位只需要复制粘贴即可

创建React Native项目

npx react-native init yx_rnDemo --version 0.70.6 // 这里我使用的RN版本为0.70.6,建议各位和我一样,因为RN贼恶心了,好多插件都会因为版本问题各种报错

安装依赖

package.json所需依赖包

// react-native-vision-camera版本号就写我这个,不然也容易有问题,今天因为这个费了不少时间"@react-native-camera-roll/camera-roll": "^7.4.2", // 照片保存到相册所需的插件"react-native-vision-camera": "2.15.4" // 调用摄像头画面和拍照所需插件

安装命令如下

yarn add @react-native-camera-roll/camera-rollyarn add react-native-vision-camera@2.15.4

安卓环境配置

找到android/app/src/mian/AndroidManifest.xml这个文件,在manifest这个标签内添加如下请求权限的代码

<manifest>...<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.CAMERA" />// 相机权限<uses-permission android:name="android.permission.RECORD_AUDIO" /> // 麦克风权限(单纯的拍照其实不用给)<applicationandroid:requestLegacyExternalStorage="true"// 添加这个(用于确保你的应用在 Android 10 中仍然能够访问外部存储，但如果你的应用目标是 Android 11 或更高版本，你应该考虑调整应用以符合 Scoped Storage 的要求。)...></application>...</manifest>

苹果ios环境配置

找到ios/项目名/Info.plist这个文件,在plist标签内新增如下代码

<pilst>...(其他代码)<key>NSCameraUsageDescription</key><string>$(PRODUCT_NAME) needs access to your Camera.</string><key>NSMicrophoneUsageDescription</key><string>$(PRODUCT_NAME) needs access to your Microphone.</string>...(其他代码)</plist>

接下来就是在单文件里面直接写代码了

找到根目录下的App.js(主入口文件),将一下代码直接粘贴进去即可

import { useCameraDevices, Camera } from 'react-native-vision-camera'import * as React from 'react'import { useRef, useEffect, useState } from 'react'import { PermissionsAndroid, Text, View, Button, Alert, Platform } from 'react-native'import { CameraRoll } from "@react-native-camera-roll/camera-roll"export default function CameraDemo (props) {const cameraRef = useRef(null) // 创建一个 ref 来引用相机组件const [hasCameraPermission, setHasCameraPermission] = useState(false) // 状态用于跟踪摄像头权限const [currentDevice, setCurrentDevice] = useState(null) // 跟踪当前摄像头设备useEffect(async () => {// 在组件加载时请求相机权限async function requestCameraPermission () {try {// 请求相机权限const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA,{title: 'Camera Permission',message: 'App needs access to your camera.',buttonNeutral: 'Ask Me Later',buttonNegative: 'Cancel',buttonPositive: 'OK',},)if (granted === PermissionsAndroid.RESULTS.GRANTED) {console.log('Camera permission granted')setHasCameraPermission(true) // 如果权限被授予，设置相机权限状态为 true} else {console.log('Camera permission denied')setHasCameraPermission(false) // 如果权限被拒绝，设置相机权限状态为 false}} catch (err) {console.warn(err)}}async function requestStoragePermission () {try {const granted = await PermissionsAndroid.requestMultiple([PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,])if (granted['android.permission.WRITE_EXTERNAL_STORAGE'] === PermissionsAndroid.RESULTS.GRANTED &&granted['android.permission.READ_EXTERNAL_STORAGE'] === PermissionsAndroid.RESULTS.GRANTED) {console.log('Storage permissions granted')// 在此处执行您需要的操作，比如保存照片到相册} else {console.log('Storage permissions denied')// 处理权限被拒绝的情况}} catch (err) {console.warn(err)}}await requestCameraPermission() // 调用函数以请求相机权限await requestStoragePermission() // 请求图库权限}, [])const devices = useCameraDevices()// 设置默认摄像头(默认后置,如果想设置的哪个后面进来还是哪个的话可以自行再做处理)useEffect(() => {if (devices.back) {setCurrentDevice(devices.back)}}, [devices])// 切换摄像头const toggleCamera = () => {setCurrentDevice(currentDevice === devices.back ? devices.front : devices.back)}const saveToCameraRoll = async (photo) => {const path = Platform.OS === 'android' ? 'file://' + photo.path : photo.path// 使用 CameraRoll 保存图片到相册CameraRoll.saveToCameraRoll(path, 'photo').then(() => {Alert.alert('Success', '图片到相册保存成功')}).catch((error) => {Alert.alert('Error', '图片保存到相册失败')})}const takePhoto = async () => {if (cameraRef.current) {try {const photo = await cameraRef.current.takePhoto()console.log('Photo taken:', photo)photo.id = new Date().getTime().toString() // 添加一个唯一的 id 属性saveToCameraRoll(photo)// 将路径传递过去,为了将照片存入相册(默认不是存到相册里面)} catch (error) {console.error('Error taking photo:', error)}}}return (<View style={{ flex: 1 }}>{hasCameraPermission && currentDevice && (<View><Cameraref={cameraRef} // 绑定refstyle={{ width: 200, height: 300 }}device={currentDevice} // 绑定设备isActive={true}photo={true} // 打开相机功能frameProcessorFps={'auto'}/><Button title="拍照" onPress={takePhoto} /><Button title="切换摄像头" onPress={toggleCamera} /></View>)}{!hasCameraPermission && <Text>Camera permission not granted.</Text>}</View>)}