如何在 React-Native 0.71 中扫描二维码？

Question

我目前正在使用react-native-vision-camera和vision-camera-code-scanner插件，但是当相机前面没有条形码时，条形码值是一个空数组，但是当带条形码时在视图中，条形码值未定义。 我尝试禁用调试器模式，因为我在线程中阅读过，但没有区别。

注意：react-native-camera 已被扩展弃用，因此：react-native-qrcode-scanner

我已经读过这个帖子，但没有解决方案： 如何在React Native cli中扫描二维码？

任何帮助都会。受到赞赏

请看下面的代码：

import React, { memo, useEffect, useState } from 'react';
import { runOnJS } from 'react-native-reanimated';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner';
import { Container } from './styles';

interface QRReaderProps {
  testID?: string;
}

const QRReader: React.FC<QRReaderProps> = ({ testID }) => {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;
  const [barcodes, setBarcodes] = useState<Barcode[]>([]);

  useEffect(() => {
    console.log('barcodesState', barcodes); // undefined
  }, [barcodes]);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE]);
    runOnJS(setBarcodes)(detectedBarcodes);
  }, []);

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  return (
    <Container testID={testID}>
      {device && hasPermission && (
        <Camera
          style={{ width: '100%', height: '100%', position: 'absolute' }}
          device={device}
          isActive
          frameProcessor={frameProcessor}
          frameProcessorFps={1}
        />
      )}
    </Container>
  );
};

export { QRReader };
export default memo(QRReader);

QRReader.defaultProps = {
  testID: 'qrreader-testID',
};

Answer 1

您是否将 globals: ['__scanCodes'] 添加到您的 babel.config.js 文件中 下列的？如果没有则添加

[
  'react-native-reanimated/plugin',
  {
    globals: ['__scanCodes'],
  },
]

我按照文档使用此代码：

import {
  Camera,
  useCameraDevices,
  useFrameProcessor,
} from 'react-native-vision-camera';
import { scanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

const CameraView = () => {
  const devices = useCameraDevices();
  const device = devices.back;
  const frameProcessor = useFrameProcessor(
    frame => {
      'worklet';
      const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat. QR_CODE], {checkInverted: true });
      const barcode = detectedBarcodes[0];
      if (barcode) { {
        runOnJS(setBarcodes)(barcode);
        console.log("your barcode" , barcode)
      }
    },
    [],
  );

  return (
        <CameraView
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
          orientation="portrait"
        />
  )
}

Answer 2

对于 2024 年仍在寻找良好替代方案的人，请查看 https://react-native-vision-camera.com/docs/guides/code-scanning