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

今天主要做了一个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这个标签内添加如下请求权限的代码

<manifest>
	...
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.CAMERA" />  // 相机权限
	<uses-permission android:name="android.permission.RECORD_AUDIO" /> // 麦克风权限(单纯的拍照其实不用给)

	<application
		android: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)