ReactVR全局按键监听：如何不受光标位置限制检测特定按键？

我明白你现在的困扰——给View绑定onInput只能在光标落在该组件范围内时捕获事件，完全没法满足全局监听的需求。其实要实现不受光标位置影响的全局按键检测，有个很直接的办法：利用浏览器原生的全局键盘事件监听，结合React组件的生命周期来管理监听的添加和移除。

下面是具体的实现步骤和代码示例：

实现思路 #

ReactVR本质上还是运行在浏览器环境中，所以我们可以直接在window对象上绑定keydown/keyup事件，这样不管光标在哪个VR组件上，只要用户按下按键，事件都会被捕获到。同时要记得在组件卸载时移除监听，避免内存泄漏。

完整代码示例 #

import React from 'react';
import { View, Text, AppRegistry } from 'react-vr';

class YourVRApp extends React.Component {
  componentDidMount() {
    // 组件挂载后添加全局键盘事件监听
    window.addEventListener('keydown', this.handleGlobalKeyPress);
    window.addEventListener('keyup', this.handleGlobalKeyRelease);
  }

  componentWillUnmount() {
    // 组件卸载前移除监听，防止内存泄漏
    window.removeEventListener('keydown', this.handleGlobalKeyPress);
    window.removeEventListener('keyup', this.handleGlobalKeyRelease);
  }

  // 处理按键按下事件
  handleGlobalKeyPress = (event) => {
    // 检测你需要的特定按键，这里以空格键和ESC键为例
    switch(event.key) {
      case ' ':
        console.log('全局捕获到空格键按下！');
        // 在这里执行你的业务逻辑
        break;
      case 'Escape':
        console.log('全局捕获到ESC键按下！');
        break;
      // 可以添加更多按键的检测逻辑
      default:
        break;
    }
  };

  // 处理按键抬起事件（如果需要的话）
  handleGlobalKeyRelease = (event) => {
    if(event.key === ' ') {
      console.log('全局捕获到空格键抬起！');
    }
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 0.8 }}>试试按下空格或ESC键，查看控制台输出！</Text>
        {/* 你的其他VR组件内容 */}
      </View>
    );
  }
}

AppRegistry.registerComponent('YourVRApp', () => YourVRApp);

关键注意点 #

• 使用event.key而非keyCode：event.key是语义化的字符串（比如'Escape'、' '），兼容性比数字类型的keyCode更好，也更易读。
• 务必移除事件监听：在componentWillUnmount中移除监听，否则组件卸载后，回调函数依然会绑定在window上，导致不必要的性能损耗和内存泄漏。
• VR控制器输入的补充：如果你的应用还需要支持VR控制器的按键，ReactVR提供了VREventSubscription来处理VR设备的输入事件，但针对普通键盘按键，上面的方法已经足够。

内容的提问来源于stack exchange，提问作者Alan Wołejko