如何在React应用中实现手机扫码并返回结果？求推荐工具包

下面几个工具包可以满足你点击触发扫码、扫描二维码并返回结果的需求：

1. react-qr-reader #

这是专门为React封装的二维码扫描组件，使用简单，开箱即用。

• 安装：npm install react-qr-reader 或 yarn add react-qr-reader
• 核心实现示例：

import React, { useState } from 'react';
import QrReader from 'react-qr-reader';

const ScannerComponent = () => {
  const [scanResult, setScanResult] = useState(null);
  const [showScanner, setShowScanner] = useState(false);

  const handleScan = (data) => {
    if (data) {
      setScanResult(data.text);
      setShowScanner(false); // 扫码成功后关闭扫描器
    }
  };

  const handleError = (err) => {
    console.error(err);
  };

  return (
    <div>
      {!showScanner && <button onClick={() => setShowScanner(true)}>打开扫码</button>}
      {showScanner && (
        <div>
          <QrReader
            delay={300}
            onError={handleError}
            onScan={handleScan}
            style={{ width: '100%' }}
          />
          <button onClick={() => setShowScanner(false)}>关闭扫码</button>
        </div>
      )}
      {scanResult && <p>扫码结果：{scanResult}</p>}
    </div>
  );
};

export default ScannerComponent;

该组件会调用设备摄像头，扫码成功后自动返回结果，你可以根据需求处理结果或关闭扫描器。

2. @zxing/library #

这是一个跨平台的条码扫描库，支持二维码，灵活性更高，适合需要自定义扫描界面的场景。

• 安装：npm install @zxing/library 或 yarn add @zxing/library
• 核心实现示例：

import React, { useState, useRef, useEffect } from 'react';
import { BrowserMultiFormatReader } from '@zxing/library';

const CustomScanner = () => {
  const [scanResult, setScanResult] = useState(null);
  const [showScanner, setShowScanner] = useState(false);
  const videoRef = useRef(null);
  const codeReaderRef = useRef(null);

  useEffect(() => {
    if (showScanner && videoRef.current) {
      codeReaderRef.current = new BrowserMultiFormatReader();
      codeReaderRef.current.decodeFromVideoDevice(
        undefined,
        videoRef.current,
        (result, err) => {
          if (result) {
            setScanResult(result.text);
            codeReaderRef.current.reset();
            setShowScanner(false);
          }
        }
      );
    }
    return () => {
      if (codeReaderRef.current) {
        codeReaderRef.current.reset();
      }
    };
  }, [showScanner]);

  return (
    <div>
      {!showScanner && <button onClick={() => setShowScanner(true)}>打开扫码</button>}
      {showScanner && (
        <div>
          <video ref={videoRef} style={{ width: '100%' }}></video>
          <button onClick={() => {
            setShowScanner(false);
            if (codeReaderRef.current) codeReaderRef.current.reset();
          }}>关闭扫码</button>
        </div>
      )}
      {scanResult && <p>扫码结果：{scanResult}</p>}
    </div>
  );
};

export default CustomScanner;

这个库允许你完全自定义扫描区域和UI，适合对界面有特殊要求的场景。

注意事项 #

• 浏览器需要支持HTTPS（localhost除外）才能调用摄像头权限；
• 用户需要授权摄像头访问权限后才能正常扫码；
• 移动端浏览器同样支持这些库，适配性较好。

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