如何在 React Native 屏幕内捕获物理条形码扫描仪扫描的输入文本？

Question

我正在开发一个使用 React Native 版本的应用程序0.68.2。

我想从移动设备本身可用的物理扫描仪硬件（它是手持式扫描仪）检测条形码扫描事件。

应用程序必须能够检测扫描的输入，而无需关注任何可见的内容TextInput。

这样的任务怎么做呢？

Answer 1

似乎没有像在普通网络应用程序中使用的那样可用的 window.onkeypress 事件。但是，一种选择是否可以是在没有其他 TextInput 聚焦时自动聚焦不可见/透明/隐藏的 TextInput？

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 个字符，您就可以确定这是一次扫描，对吧？）

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

希望有帮助！