条码扫描：快速扫描时条码出现合并问题

嘿，我之前做条码扫描功能的时候也踩过这个合并的坑，太懂这种烦躁了！咱们先搞明白为啥会这样：大部分条码扫描器其实是模拟键盘输入，快速扫的时候，前一个条码的字符（甚至它的结束标记）还没被我们的代码处理完，后一个条码的字符就已经冲进TextInput里了，结果两个条码就被当成一串连续的输入拼在一起了。

给你一套亲测有效的解决思路和代码修改方案，分两种情况兜底，绝对能搞定快速扫描的问题：

核心解决思路 #

• 给扫描器配置结束符（比如回车、Tab键）：这是最根本的办法，扫描器每次扫完条码会自动输入一个结束标记，我们靠这个标记精准分割每一个条码。
• 给输入逻辑加防抖+结束符检测：就算扫描器没配置结束符，防抖也能在输入暂停时识别为一个完整条码，双保险。

修改后的完整Hook代码 #

import { useRef, useState, useEffect } from "react";
import { TextInput } from "react-native";

interface UseBarcodeScanner {
  onScan: (barcode: string) => Promise<void> | void;
  scanTerminator?: string; // 可选的扫描结束符，默认用回车
}

const useBarcodeScanner = ({ onScan, scanTerminator = "\n" }: UseBarcodeScanner) => {
  const inputRef = useRef<TextInput>(null);
  const [inputValue, setInputValue] = useState("");
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  const handleTextChange = (text: string) => {
    setInputValue(text);

    // 优先检测结束符：只要输入里包含结束标记，就分割出所有完整条码
    if (text.includes(scanTerminator)) {
      // 分割后过滤掉空字符串（避免结束符前后的空内容）
      const validBarcodes = text.split(scanTerminator).filter(code => code.trim() !== "");
      
      // 逐个调用扫描回调，处理每一个条码
      validBarcodes.forEach(async (barcode) => {
        if (barcode.trim()) await onScan(barcode.trim());
      });

      // 立刻清空输入框，确保下一次扫描不会残留内容
      setInputValue("");
      return;
    }

    // 防抖兜底：如果300ms内没有新输入，就把当前内容当成一个完整条码
    // 这个时间可以根据你的扫描器速度微调，一般200-500ms都可以
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(async () => {
      if (inputValue.trim()) {
        await onScan(inputValue.trim());
        setInputValue("");
      }
    }, 300);
  };

  return {
    inputProps: {
      ref: inputRef,
      value: inputValue,
      onChangeText: handleTextChange,
      autoFocus: true,
      editable: false, // 禁止手动输入，只接受扫描器的模拟输入
      style: { height: 0, width: 0, opacity: 0 }, // 隐藏输入框，用户不需要看到它
    },
  };
};

// 简单的使用示例
const BarcodeScannerView = () => {
  const handleBarcodeScan = async (barcode: string) => {
    console.log("成功扫描到条码：", barcode);
    // 这里放你的业务逻辑，比如提交到服务器、更新本地数据等
  };

  const { inputProps } = useBarcodeScanner({ onScan: handleBarcodeScan });

  return <TextInput {...inputProps} />;
};

export default BarcodeScannerView;

额外的扫描器配置建议 #

• 一定要去开扫描器的「发送结束符」功能！一般扫描器都会附带一本设置条码手册，找到“发送回车”对应的设置条码，扫一下就能开启，这比纯代码处理靠谱多了。
• 如果你的扫描器有「扫描间隔」设置，可以适当调大一点（比如100ms），不过只要代码里处理了结束符，这个其实可有可无。

内容来源于stack exchange