react-native-qrcode-scanner无法识别空二维码并触发弹窗求助

react-native-qrcode-scanner@1.5.3 依赖的旧版 react-native-camera 组件，其条码识别逻辑会过滤掉内容为空的二维码，导致空二维码无法触发onRead回调，你写的空数据判断逻辑自然无法执行。

方案一：更换为现代扫描库（推荐） #

由于react-native-qrcode-scanner已多年未维护，建议更换为更灵活的react-native-vision-camera配合条码识别插件，支持自定义识别规则，包括空二维码的处理：

步骤1：安装依赖 #

npm install react-native-vision-camera vision-camera-code-scanner

步骤2：配置权限 #

• iOS：在Info.plist中添加相机权限声明：

  <key>NSCameraUsageDescription</key>
  <string>需要使用相机扫描二维码</string>
  

• Android：在AndroidManifest.xml中添加相机权限：

  <uses-permission android:name="android.permission.CAMERA" />
  

步骤3：实现扫描组件 #

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { scanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';
import { useDispatch } from 'react-redux';
import { changeState, scanQR } from '../your-redux-actions-path'; // 替换为你的Redux路径
import { getAlertObject, ALERT_TYPES, showAlertModal } from '../your-alert-utils-path'; // 替换为你的弹窗工具路径

const QRScannerScreen = () => {
  const dispatch = useDispatch();
  const [hasPermission, setHasPermission] = useState(false);
  const [isQRProcessing, setIsQRProcessing] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

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

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    if (isQRProcessing) return;
    
    const barcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE]);
    for (const barcode of barcodes) {
      const data = barcode.rawValue ?? '';
      setIsQRProcessing(true);
      
      if (data.trim() === '') {
        // 空二维码弹窗逻辑
        dispatch(
          showAlertModal(
            getAlertObject(
              '空二维码',
              '请扫描有效的二维码',
              ALERT_TYPES.FAILED,
              '重试',
              '关闭',
              () => setIsQRProcessing(false)
            )
          )
        );
      } else {
        // 有效二维码处理逻辑
        const splitted = data.split('|')[0];
        dispatch(changeState(['isQRProcessing', true]));
        dispatch(scanQR({ bookingRef: splitted.trim() }));
      }
    }
  }, [isQRProcessing, dispatch]);

  if (!device || !hasPermission) {
    return <View />;
  }

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={!isQRProcessing}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
        cameraProps={{ autoFocus: 'on' }}
      />
      {/* 自定义扫描框，替换原marker */}
      <View style={styles.marker} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  marker: {
    position: 'absolute',
    width: 200,
    height: 200,
    borderWidth: 2,
    borderColor: '#fff',
    borderRadius: 10,
    alignSelf: 'center',
    top: '50%',
    marginTop: -100
  }
});

export default QRScannerScreen;

方案二：修改旧库源码（临时方案，不推荐） #

如果暂时不想更换库，可以修改react-native-qrcode-scanner的依赖源码，但后续更新依赖会丢失修改：

1. 找到node_modules/react-native-qrcode-scanner/src/index.js，定位handleBarCodeRead方法；
2. 若底层react-native-camera的BarCodeScanner能触发空数据回调，确保方法未过滤空数据，直接将数据传递给onRead；
3. 若底层组件本身不触发空数据回调，此方法无效。

旧版react-native-qrcode-scanner依赖的react-native-camera已停止维护，存在兼容性问题（如不支持新React Native版本），长期来看更换现代库是更稳妥的选择。

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