React Native：无需TextInput捕获扫描输入的实现方案咨询

React Native核心库本身并没有提供类似Web端onKeyDown的全局按键事件监听API，但可以通过以下几种可靠方案实现需求，无需依赖已停止维护的第三方库：

1. 自定义Android原生模块（推荐） #

这是最稳定可控的方案，通过编写少量Android原生代码监听全局按键事件，再通过RN桥接层将事件传递到JS端。

实现步骤： #

• Android端：
  创建一个继承自ReactContextBaseJavaModule的模块，注册全局按键监听器，并将事件发送到JS层。简化示例代码如下：

  public class GlobalKeyEventModule extends ReactContextBaseJavaModule {
      private static final String MODULE_NAME = "GlobalKeyEvent";
      private final ReactApplicationContext reactContext;
  
      public GlobalKeyEventModule(ReactApplicationContext context) {
          super(context);
          this.reactContext = context;
      }
  
      @Override
      public String getName() {
          return MODULE_NAME;
      }
  
      // 在Activity的onKeyDown回调中调用此方法发送事件
      public void dispatchKeyEvent(int keyCode, char keyChar) {
          WritableMap eventParams = Arguments.createMap();
          eventParams.putInt("keyCode", keyCode);
          eventParams.putString("keyChar", String.valueOf(keyChar));
          
          reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                  .emit("globalKeyDown", eventParams);
      }
  }
  

  同时需要在MainActivity的onKeyDown方法中调用模块的dispatchKeyEvent，确保捕获所有按键输入。

• JS端：
  通过DeviceEventEmitter监听原生模块发送的事件：

  import { useEffect, DeviceEventEmitter } from 'react-native';
  
  useEffect(() => {
      const keyEventSubscription = DeviceEventEmitter.addListener(
          'globalKeyDown',
          (event) => {
              // 处理扫描设备的输入逻辑
              console.log('捕获按键:', event.keyChar, event.keyCode);
          }
      );
  
      return () => keyEventSubscription.remove();
  }, []);
  

2. 透明隐藏TextInput（临时快速方案） #

如果不想编写原生代码，可以创建一个全屏透明的TextInput，让它始终获取焦点来捕获扫描输入：

import { TextInput, StyleSheet } from 'react-native';

// 在根组件中添加此TextInput
<TextInput
  style={styles.hiddenInput}
  autoFocus={true}
  onKeyPress={({ nativeEvent }) => {
      console.log('扫描输入字符:', nativeEvent.key);
      // 处理扫描内容逻辑
  }}
  // 禁止弹出键盘
  showSoftInputOnFocus={false}
/>

const styles = StyleSheet.create({
  hiddenInput: {
      position: 'absolute',
      top: -9999,
      opacity: 0,
      width: '100%',
      height: '100%',
  },
});

注意：此方案有局限性，若应用内其他输入框获取焦点，会导致无法捕获扫描事件，适合单页面或无其他输入需求的场景。

3. 基于react-native-screens的页面级监听（场景化方案） #

如果应用使用了react-native-screens，可以在对应页面的容器中通过Android Activity的回调监听按键事件，这种方式仅能捕获当前活跃页面的按键输入，适合特定页面的扫描需求。

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