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-roll
yarn 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.}
    
  )
}