Expo React Native中如何监听无绑定输入的键盘/红外扫描事件？

方案一：隐藏全局输入框+Keyboard模块监听 #

核心思路是创建一个始终聚焦的透明输入框，接收红外扫描器的等效键盘输入，无需绑定业务输入框。

import React, { useRef, useEffect } from 'react';
import { View, TextInput, Keyboard } from 'react-native';

const GlobalScannerListener = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 键盘弹出时强制聚焦输入框
    const keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
      inputRef.current?.focus();
    });

    // 组件挂载后立即聚焦输入框
    inputRef.current?.focus();

    // 定时检查输入框状态，防止意外失焦
    const focusCheckTimer = setInterval(() => {
      if (inputRef.current && !inputRef.current.isFocused()) {
        inputRef.current.focus();
      }
    }, 1000);

    return () => {
      keyboardShowListener.remove();
      clearInterval(focusCheckTimer);
    };
  }, []);

  const handleScanInput = (text) => {
    // 多数扫描器会自带结束符（如回车），以此判断扫描完成
    if (text.endsWith('\n')) {
      const barcode = text.trim();
      // 这里处理扫描到的条码数据
      console.log('扫描结果:', barcode);
      // 清空输入框准备下一次扫描
      inputRef.current?.clear();
    }
  };

  return (
    <View style={{ position: 'absolute', width: 0, height: 0, opacity: 0 }}>
      <TextInput
        ref={inputRef}
        onChangeText={handleScanInput}
        autoFocus
        keyboardType="visible-password" // 阻止系统软键盘弹出
        editable={true}
      />
    </View>
  );
};

export default GlobalScannerListener;

使用方式：将这个组件放在App的根组件中，即可全局监听扫描输入。

方案二：结合expo-keyboard-manager增强稳定性 #

如果方案一仍存在失焦问题，可以搭配expo-keyboard-manager优化键盘管理：

1. 安装依赖：

expo install expo-keyboard-manager

2. 在App根组件初始化配置：

import * as KeyboardManager from 'expo-keyboard-manager';
import { useEffect } from 'react';

useEffect(() => {
  // 禁用系统键盘工具栏，避免干扰隐藏输入框
  KeyboardManager.setEnableAutoToolbar(false);
  KeyboardManager.setToolbarPreviousNextButtonEnabled(false);
}, []);

之后配合方案一的隐藏输入框组件使用，进一步降低失焦概率。

方案三：裸工作流下的原生广播监听（进阶） #

如果Expo管理工作流满足不了需求，可切换到裸工作流，通过安卓原生代码监听全局输入事件：

• 在安卓Manifest中配置相关权限
• 创建BroadcastReceiver监听InputMethodManager的输入事件
• 通过React Native桥接将事件传递到JS层处理

该方案需要原生开发能力，适合对稳定性要求极高的场景。

注意事项 #

• 提前确认扫描器的结束符：大部分设备可配置结束符（回车、Tab等），以此作为扫描完成的判断依据，避免拼接不完整的条码。
• 测试边缘场景：比如设备休眠唤醒后、切换应用后，输入框是否能自动重新聚焦。

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