网站界面友好,西安网约车公司排行榜,订单拆单在电商网站建设,shopxo开源商城今天主要做了一个demo,功能很简单,就是调用手机摄像头画面,并且可以通过按钮控制拍照以及将图片保存到手机相册的功能,接下来我将从创建项目开始一步一步完成这个demo,各位只需要复制粘贴即可 创建React Native项目
npx react-native init yx_rnDemo --version 0.70.6 // 这里… 今天主要做了一个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-camera2.15.4安卓环境配置
找到android/app/src/mian/AndroidManifest.xml这个文件,在manifest这个标签内添加如下请求权限的代码
manifest...uses-permission android:nameandroid.permission.INTERNET /uses-permission android:nameandroid.permission.CAMERA / // 相机权限uses-permission android:nameandroid.permission.RECORD_AUDIO / // 麦克风权限(单纯的拍照其实不用给)applicationandroid:requestLegacyExternalStoragetrue // 添加这个(用于确保你的应用在 Android 10 中仍然能够访问外部存储但如果你的应用目标是 Android 11 或更高版本你应该考虑调整应用以符合 Scoped Storage 的要求。).../application...
/manifest苹果ios环境配置
找到ios/项目名/Info.plist这个文件,在plist标签内新增如下代码
pilst...(其他代码)keyNSCameraUsageDescription/keystring$(PRODUCT_NAME) needs access to your Camera./stringkeyNSMicrophoneUsageDescription/keystring$(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-rollexport 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 (ViewCameraref{cameraRef} // 绑定refstyle{{ width: 200, height: 300 }}device{currentDevice} // 绑定设备isActive{true}photo{true} // 打开相机功能frameProcessorFps{auto}/Button title拍照 onPress{takePhoto} /Button title切换摄像头 onPress{toggleCamera} //View)}{!hasCameraPermission TextCamera permission not granted./Text}/View)
}
