Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

    • 沙盒环境-Expo

    • 原生环境

      • 案例

        • React Native蓝牙
        • React Native文件系统
        • React Native扫描二维码
          • 安卓环境
          • 报错解决方案
            • 问题
            • 解决方案
        • React Native国际化
        • React Native使用antd库报警告
        • React Native 自定义字体
        • React Native 响应式布局
        • React Native 使用SVG
      • 文档

    • React Native第三方库
  • 前端
  • React Native
  • 原生环境
  • 案例
HiuZing
2023-09-22
目录

React Native扫描二维码

采用:VisionCamera Documentation | VisionCamera (react-native-vision-camera.com) (opens new window)

# 安卓环境

  1. 安装

    yarn add react-native-vision-camera
    
    1
  2. 更新清单

    在AndroidManifest.xml文件中添加

    <uses-permission android:name="android.permission.CAMERA" />
    
    1
  3. 获取/请求权限

    useEffect(() => {
        (async () => {
          const status = await Camera.requestCameraPermission();
          setHasPermission(status === "authorized");
        })();
    }, []);
    
    1
    2
    3
    4
    5
    6
  4. 使用MLKit Vision QRCODE扫描读取条形码的插件

    rodgomesc/vision-camera-code-scanner: VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision QrCode Scanning (github.com) (opens new window)

    1. 安装

      yarn add vision-camera-code-scanner
      
      1
    2. 安装

      yarn add react-native-reanimated
      
      1
    3. 将插件添加到 react-native-reanimated/plugin 您的 babel.config.js

        module.exports = {
          plugins: [
            ...
            'react-native-reanimated/plugin',
          ],
        };
      
      1
      2
      3
      4
      5
      6

      注意

      react-native-reanimated/plugin 必须列在最后

    4. 插入作为您的 index.tsx 第一行

      import 'react-native-reanimated'
      
      1
    5. 添加到 babel.config.js

      plugins: [
      	...
          {
          	globals: ['__scanCodes'],
          },
      ],
      
      1
      2
      3
      4
      5
      6
  5. 使用 视图

    import * as React from "react";
    
    import { StyleSheet, Text } from "react-native";
    import { useCameraDevices, useFrameProcessor } from "react-native-vision-camera";
    import { Camera } from "react-native-vision-camera";
    import { useScanBarcodes, BarcodeFormat, Barcode, scanBarcodes } from "vision-camera-code-scanner";
    import { useEffect, useState } from "react";
    import { runOnJS, useSharedValue } from "react-native-reanimated";
    
    export default function CameraScreen() {
      const [hasPermission, setHasPermission] = React.useState(false);
      const devices = useCameraDevices();
      const device = devices.back;
      const [barcodes, setBarcodes] = useState<Barcode[]>([]);
      // const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
      //   checkInverted: true
      // });
    
      // Alternatively you can use the underlying function:
      const frameProcessor = useFrameProcessor((frame) => {
        "worklet";
        const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true });
        runOnJS(setBarcodes)(detectedBarcodes);
      }, []);
    
      useEffect(() => {
        (async () => {
          const status = await Camera.requestCameraPermission();
          setHasPermission(status === "authorized");
        })();
      }, []);
    
      return (
        device != null &&
        hasPermission && (
          <>
            <Camera
              style={styles.camera}
              device={device}
              isActive={true}
              frameProcessor={frameProcessor}
              frameProcessorFps={5}
            />
            {barcodes.map((barcode, idx) => (
              <Text key={idx} style={styles.barcodeTextURL}>
                {barcode.displayValue}
              </Text>
            ))}
          </>
        )
      );
    }
    
    
    const styles = StyleSheet.create({
      camera: {
        height: 460,
        width: "50%",
        alignSelf: "center"
      },
      barcodeTextURL: {
        fontSize: 20,
        color: "white",
        fontWeight: "bold"
      }
    });
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66

# 报错解决方案

# 问题

在构建的时候报该错,Execution failed for task ':react-native-vision-camera:buildCMakeDebug[arm64-v8a]'.

# 解决方案

Execution failed for task ':react-native-vision-camera:generateJsonModelDebug'. > java.lang.NullPointerException (no error message)🐛 · Issue #1284 · mrousavy/react-native-vision-camera --- 任务“:react-native-vision-camera:generateJsonModelDebug”的执行失败。> java.lang.NullPointerException (无错误消息) 🐛 ·问题 #1284 ·mrousavy/react-native-vision-camera-the (github.com) (opens new window)

进入你的 android/build.gradle 并在 android/build.gradle 中为你所在的依赖项添加一个额外的类路径classpath 'com.android.tools.build:gradle:7.0.0'

上次更新: 2024/08/14, 04:14:33
React Native文件系统
React Native国际化

← React Native文件系统 React Native国际化→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式