React Native 0.71使用vision-camera扫码时barcodes值异常求助

问题描述 #

在React Native 0.71环境下，使用react-native-vision-camera搭配vision-camera-code-scanner实现扫码功能时，出现以下异常：

• 镜头前无条码时，barcodes状态值为空数组（符合预期）
• 条码进入识别范围后，barcodes状态值变为undefined（不符合预期）
  已尝试关闭调试模式，问题仍未解决；已排除废弃的react-native-camera及其衍生库，查阅相关Stack Overflow线程未找到可行方案。

问题分析 #

1. scanBarcodes函数在识别到条码时，可能因底层识别逻辑返回undefined而非预期的条码数组
2. Worklet环境与React主线程间的数据传递可能存在类型不一致，导致状态被设置为undefined

修复方案 #

1. 为scanBarcodes返回值添加兜底处理 #

确保无论识别结果如何，传递给状态的始终是数组类型，避免undefined污染状态。

2. 优化代码细节 #

• 统一使用useState替代React.useState（语法简化）
• 拆分权限请求函数，提升代码可读性

修改后的完整代码 #

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] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;
  const [barcodes, setBarcodes] = useState<Barcode[]>([]);

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

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    // 兜底处理：确保识别结果始终为数组，避免undefined
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE]) ?? [];
    // 类型断言确保符合Barcode[]类型
    runOnJS(setBarcodes)(detectedBarcodes as Barcode[]);
  }, []);

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

  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',
};

额外排查建议 #

• 版本兼容性：确认react-native-vision-camera和vision-camera-code-scanner的版本适配React Native 0.71，建议升级至最新兼容版本
• 原生配置检查：
  • iOS：Info.plist中添加相机权限描述NSCameraUsageDescription
  • Android：AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />
• 帧率调整：尝试将frameProcessorFps提高至5左右，过低帧率可能导致识别逻辑异常

内容的提问来源于stack exchange，提问作者SirFitz