react-native-vision-camera RN相机初使用小记

最新推荐文章于 2024-05-11 09:40:37 发布

小川料理机

最新推荐文章于 2024-05-11 09:40:37 发布

阅读量4k

点赞数 3

分类专栏： react-native 文章标签： react native javascript 前端前端框架开发语言

本文链接：https://blog.csdn.net/weixin_45427607/article/details/127103934

版权

本文档介绍了如何使用react-native-vision-camera，这是一个由react-native-camera作者推出的全新相机插件。由于react-native-camera被弃用，作者推出了此更新版，提供录像和拍照功能。在前端开发中，此插件适用于扫码和相机背景应用。文中给出了参考代码示例。

摘要由CSDN通过智能技术生成

该插件是react-native-camera变种， react-native-camera作者已经弃用，重新上架的新的插件，网上基本上没有使用的帖子本人边github关键词搜索边参考官方文档===》指路react-native-vision-camera官方文档

大致调整出一个可以录像/拍照的demo 供大家参考～

适用于：扫码场景，相机作为铺底（我所运用的场景）

代码如下：

import React, { forwardRef, useRef, useImperativeHandle } from "react";
import { View, Text, Image } from "react-native";
import { Camera, useCameraDevices } from "react-native-vision-camera";

const CameraScreen = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    //暴露可供父组件调用函数的hooks
    takePhoto,
    takeVideoStart,
    takeVideoStop,
  }));
  const camera = useRef(null);
  const devices = useCameraDevices();
  const device = devices.back; //默认后置摄像