如何捕捉物理条形码扫描仪的扫描输入文本在一个屏幕内的反应本机？

Question

我正在使用React 0.68.2开发一个应用程序。

我想检测一个条形码扫描事件从物理扫描仪硬件在移动本身(它是一个手持扫描仪)。

应用程序必须能够检测被扫描的输入，而不需要聚焦于任何可见的TextInput。

如何完成这样的任务？

Answer 1

似乎没有像您在普通use应用程序中使用的window.onkeypress事件。但是，一种选择是在没有其他TextInput聚焦的情况下自动聚焦一个不可见/透明/隐藏的TextInputs吗？

import React, { useEffect } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
    const invisibleRef = React.useRef(null);

    useEffect(() => {
        invisibleRef.current.focus();
    }, []);

    const focusInvisibleInput = (e) => {
        e.preventDefault();
        if (invisibleRef.current) {
            invisibleRef.current.focus();
        }
    };

    return (
        <View style={styles.container} onTouchStart={focusInvisibleInput}>
            <TextInput
                ref={invisibleRef}
                autoFocus={true}
                autoCorrect={false}
                autoComplete={false}
                style={{ opacity: 0 }}
                onChangeText={(text) => console.log("hidden", text)}
            />

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type something here"
                onChangeText={(text) => console.log("visible", text)}
            />

            <Text>A nice react native app!</Text>

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type some thing else here!"
                onChangeText={(text) => console.log("visible", text)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

在此之后，您可能需要添加一个通用输入处理程序，该处理程序可以乘以文本输入的速度，以确定它是否是扫描，而不是手动文本输入。(如果你在50毫秒内得到20个字符，你可以确定这是一个扫描，对吗？)

也许还有很多其他的方法可以做得更好，但我现在找不到。

希望这能帮上忙！