react-zxing模式切换问题：摄像头未关闭、扫描视图丢失

问题1：切回扫描模式后视图消失 #

原因 #

通过条件渲染直接卸载扫描组件（如{showScanner && <BarcodeReader />}），重新挂载时组件未正确初始化视频流，导致扫描视图空白。

解决方案 #

• 用CSS隐藏而非卸载组件：保留组件在DOM中，通过样式控制显示状态，避免组件卸载后重新初始化失败：

  <BarcodeReader
    style={{ display: showScanner ? 'block' : 'none' }}
    onResult={(result) => { /* 处理扫描结果 */ }}
  />
  

• 用key强制重新渲染：若必须卸载组件，给<BarcodeReader>添加动态key，切换到扫描模式时更新key，强制组件重新初始化：

  {showScanner && (
    <BarcodeReader
      key={scannerKey}
      onResult={(result) => { /* 处理扫描结果 */ }}
    />
  )}
  
  // 切换模式时更新key
  const switchToScan = () => {
    setShowScanner(true);
    setScannerKey(Date.now());
  };
  

问题2：切换到手动输入模式时摄像头未关闭 #

原因 #

react-zxing组件在卸载或隐藏时，未正确终止摄像头媒体流，导致设备摄像头持续被占用。

解决方案 #

• 手动调用停止扫描方法：获取扫描组件实例，切换到手动输入时调用stopContinuousScan关闭摄像头：

  import { useRef } from 'react';
  
  const scannerRef = useRef(null);
  
  const switchToManual = () => {
    setShowScanner(false);
    if (scannerRef.current) {
      scannerRef.current.stopContinuousScan();
    }
  };
  
  // 绑定ref到扫描组件
  <BarcodeReader
    ref={scannerRef}
    style={{ display: showScanner ? 'block' : 'none' }}
    onResult={(result) => { /* 处理扫描结果 */ }}
  />
  

• 添加卸载清理逻辑：用useEffect监听模式切换，在退出扫描模式时强制关闭媒体流：

  useEffect(() => {
    if (!showScanner && scannerRef.current) {
      scannerRef.current.stopContinuousScan();
    }
  }, [showScanner]);
  

完整示例代码片段 #

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

function App() {
  const [showScanner, setShowScanner] = useState(true);
  const [scannerKey, setScannerKey] = useState(Date.now());
  const scannerRef = useRef(null);
  const [barcode, setBarcode] = useState('');

  const handleScanResult = (result) => {
    if (result.text) {
      setBarcode(result.text);
    }
  };

  const switchToScan = () => {
    setShowScanner(true);
    setScannerKey(Date.now());
  };

  const switchToManual = () => {
    setShowScanner(false);
    scannerRef.current?.stopContinuousScan();
  };

  useEffect(() => {
    return () => {
      scannerRef.current?.stopContinuousScan();
    };
  }, []);

  return (
    <div className="App">
      <div>
        <button onClick={switchToScan}>扫描模式</button>
        <button onClick={switchToManual}>手动输入</button>
      </div>
      {showScanner ? (
        <BarcodeReader
          key={scannerKey}
          ref={scannerRef}
          onResult={handleScanResult}
          style={{ width: '300px', height: '300px' }}
        />
      ) : (
        <input
          type="text"
          value={barcode}
          onChange={(e) => setBarcode(e.target.value)}
          placeholder="手动输入条形码"
        />
      )}
      {barcode && <p>扫描/输入的条形码：{barcode}</p>}
    </div>
  );
}

export default App;

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