React Native如何无第三方依赖实现无需聚焦输入框的全局按键监听？

问题对应根因 #

• React Native 核心库的<View>组件在Android/iOS原生端映射的是平台基础容器控件，默认不具备键盘第一响应者资格，TS类型定义中也不存在onKeyDown、onKeyPress这类web端专属属性，直接挂载既会报类型错误，实际运行也不会触发回调。
• window.addEventListener是浏览器环境BOM提供的API，React Native原生端运行在独立JS引擎中，没有完整BOM实现，且移动端原生系统的键盘事件默认只会派发给当前持有焦点的响应控件（通常是聚焦状态的TextInput），不存在全局事件冒泡路径，该方案在双端必然不生效。
• React Native 核心库截至当前稳定版本，没有内置跨端的全局无焦点按键监听JS API，无障碍场景下的外接硬件键盘事件监听，默认需要通过原生层桥接实现。

无第三方依赖实现方案 #

以下方案不需要引入任何npm第三方包，直接通过原生层桥接系统全局按键能力实现，App前台运行全程可捕获按键，无需用户聚焦任何可视控件，适配无障碍场景需求。

双端通用JS层逻辑 #

JS层统一通过RN内置的DeviceEventEmitter监听原生层抛出的按键事件即可：

import { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';

export default function useGlobalKeyPress() {
  useEffect(() => {
    const subscription = DeviceEventEmitter.addListener('GlobalKeyPress', (event) => {
      // 匹配目标按键，这里以f键为例
      if (event.key === 'f') {
        // 触发视障友好功能逻辑
        console.log('触发全局无障碍快捷键');
      }
    });

    return () => subscription.remove();
  }, []);
}

在App根组件挂载这个自定义hook即可实现全局监听。

iOS端原生配置 #

iOS端可直接通过AppDelegate注册全局响应的UIKeyCommand捕获按键，无需额外权限：
打开iOS项目目录下的AppDelegate.mm文件，添加如下代码：

- (NSArray<UIKeyCommand *> *)keyCommands {
    static UIKeyCommand *fKeyCommand = nil;
    if (!fKeyCommand) {
        fKeyCommand = [UIKeyCommand keyCommandWithInput:@"f"
                                          modifierFlags:0
                                                 action:@selector(handleGlobalKeyPress:)];
        // 优先级高于系统默认快捷键，避免和系统功能冲突
        fKeyCommand.wantsPriorityOverSystemBehavior = YES;
    }
    return @[fKeyCommand];
}

- (void)handleGlobalKeyPress:(UIKeyCommand *)sender {
    [self.bridge enqueueJSCall:@"RCTDeviceEventEmitter"
                        method:@"emit"
                          args:@[@"GlobalKeyPress", @{@"key": sender.input}]
                    completion:nil];
}

Android端原生配置 #

Android端通过重写主Activity的onKeyDown回调捕获全局按键事件：
打开安卓项目目录下的MainActivity.kt文件，添加如下代码：

import android.view.KeyEvent
import com.facebook.react.bridge.Arguments
import com.facebook.react.modules.core.DeviceEventManagerModule

class MainActivity : ReactActivity() {
    // 省略原有默认代码

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        val keyMap = mapOf(
            KeyEvent.KEYCODE_F to "f"
            // 可在此处扩展其他需要监听的按键映射
        )
        keyMap[keyCode]?.let { pressedKey ->
            reactInstanceManager.currentReactContext?.let { context ->
                context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
                    .emit("GlobalKeyPress", Arguments.createMap().apply {
                        putString("key", pressedKey)
                    })
            }
            return true
        }
        return super.onKeyDown(keyCode, event);
    }
}

注意：不推荐使用隐藏TextInput强制抓焦点的纯JS实现方案，这类方案会导致软键盘意外弹出、正常输入框焦点被抢占、页面切换时监听失效等问题，不适配生产环境无障碍场景要求。

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