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// 后续发现个问题,安装了react-native-vision-camera@2.15.4之后,后续安装的大部分包后项目都跑不起来,大概率都跟这个插件有关,解决方法就是安装新插件之前把这个插件卸载了,等安装完新插件后先运行项目跑起来后再次重新安装react-native-vision-camera@2.15.4这个插件,具体原因我也不知道,但是我就是这样解决的

安卓环境配置

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

...  // 相机权限 // 麦克风权限(单纯的拍照其实不用给)...

苹果ios环境配置

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

...(其他代码)NSCameraUsageDescription$(PRODUCT_NAME) needs access to your Camera.NSMicrophoneUsageDescription$(PRODUCT_NAME) needs access to your Microphone....(其他代码)

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

找到根目录下的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 (    { flex: 1 }}      {hasCameraPermission && currentDevice && (                  cameraRef} // 绑定ref            style={{ width: 200, height: 300 }}            device={currentDevice} // 绑定设备            isActive={true}            photo={true} // 打开相机功能            frameProcessorFps={'auto'}          /          takePhoto} /          toggleCamera} /              )}      {!hasCameraPermission && Camera permission not granted.}      )}