如何在ReactJS中使用zxing实现二维码扫描？代码无法识别二维码

API 探路者

2026-6-26

React二维码扫描方案问题排查与解决

问题背景

尝试过react-qr-reader、react-qr-scanner等方案，但均与最新版React存在依赖冲突；切换到react-zxing后工具可正常运行，但无法识别二维码，以下是针对该问题的排查与解决建议：

1. 优化视频流配置

react-zxing默认的视频约束可能未适配扫码需求，比如摄像头类型、分辨率或对焦模式，可在配置中明确指定：

const { ref } = useZxing({
  onDecodeResult(result) {
    setResult(result.getText());
    console.log(result);
  },
  // 添加视频约束参数
  videoConstraints: {
    facingMode: "environment", // 优先调用后置摄像头（扫码更高效）
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    focusMode: "continuous" // 开启自动连续对焦
  }
});

2. 修正视频元素样式

未设置尺寸的video标签可能导致画面拉伸或显示过小，影响识别精度，给video添加基础样式：

// 直接在JSX中设置内联样式
<video ref={ref} style={{ width: '100%', maxWidth: '600px', height: 'auto', border: '1px solid #eee' }} />

3. 排查扫码环境与二维码质量

确保二维码清晰无破损、对比度充足，避免模糊或被遮挡
选择光线充足的环境，避免强光直射或过暗场景
保持二维码位于视频画面中心区域，距离适中（不要过近或过远）

4. 验证依赖兼容性与重装

即使工具能运行，也可能存在隐性版本兼容问题，尝试重装react-zxing：

npm uninstall react-zxing
npm install react-zxing

5. 增加调试日志排查错误

通过监听解码错误，获取更多故障信息：

const { ref, error } = useZxing({
  onDecodeResult(result) {
    setResult(result.getText());
    console.log("解码结果:", result);
  },
  onError(err) {
    console.error("解码异常:", err);
  }
});

// 在页面中展示错误提示
{error && <p style={{ color: '#dc3545' }}>扫码错误：{error.message}</p>}