React Native Camera Kit实现单次扫码，避免持续触发onReadCode

方案一：通过状态控制扫描开关（最直接的单次扫码实现） #

核心思路是用状态变量控制scanBarcode的开启/关闭，扫码成功后立即关闭扫描功能，避免持续触发回调。

代码示例：

import { useState } from 'react';
import { Camera } from 'react-native-camera-kit';
import Colors from './your-colors-path'; // 替换成你的颜色文件路径

const ScannerScreen = () => {
  const [isScanning, setIsScanning] = useState(true);

  const handleCodeRead = (event) => {
    if (!isScanning) return; // 已停止扫描则直接返回
    const codeValue = event?.nativeEvent.codeStringValue;
    console.log("扫描到的码：", codeValue);
    
    // 扫码成功后立即关闭扫描
    setIsScanning(false);

    // 这里添加你的业务逻辑，比如跳转页面、解析码值等
    // ...
  };

  // 可选：添加重新扫描按钮，用于恢复扫描功能
  const resetScanner = () => {
    setIsScanning(true);
  };

  return (
    <>
      <Camera
        showFrame={true}
        laserColor={Colors.green}
        frameColor="white"
        onReadCode={handleCodeRead}
        scanBarcode={isScanning} // 用状态控制扫描开关
        style={{flex: 1}}
      />
      {!isScanning && (
        <Button title="重新扫描" onPress={resetScanner} />
      )}
    </>
  );
};

export default ScannerScreen;

方案二：记录已扫描码值（避免重复识别同一码） #

如果需要保持扫描功能开启，但不想重复处理同一个码，可以记录已扫描的码值，回调时判断是否已处理过：

import { useState } from 'react';
import { Camera } from 'react-native-camera-kit';
import Colors from './your-colors-path';

const ScannerScreen = () => {
  const [scannedCodes, setScannedCodes] = useState(new Set());

  const handleCodeRead = (event) => {
    const codeValue = event?.nativeEvent.codeStringValue;
    if (!codeValue || scannedCodes.has(codeValue)) return;

    console.log("扫描到新的码：", codeValue);
    setScannedCodes(prev => new Set([...prev, codeValue]));

    // 处理业务逻辑
    // ...
  };

  return (
    <Camera
      showFrame={true}
      laserColor={Colors.green}
      frameColor="white"
      onReadCode={handleCodeRead}
      scanBarcode={true}
      style={{flex: 1}}
    />
  );
};

export default ScannerScreen;

说明 #

• 方案一适合严格单次扫码的场景，扫码成功后直接停止扫描，需要重新扫描时手动触发。
• 方案二适合需要持续扫描但不重复处理同一码的场景，比如连续扫多个不同的码。

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