如何使用 React Native 中的事件监听器和钩子检查是否按下/按住了某个键？

Question

如果我需要知道当前是否按下了诸如 Shift 键之类的键，我如何找到该信息？该解决方案应该将此信息分配给一个可以像这样调用的变量：

if(shiftHeld){
  //Do the thing.
}

Answer 1

该解决方案将使用带有钩子和事件侦听器的 React Native。您可以使用事件侦听器来检测按下（或未按下）按键的任何时间，然后筛选要用作条件的按键的结果。这是解决方案：

  const [shiftHeld, setShiftHeld] = useState(false);


  function downHandler({key}) {
    if (key === 'Shift') {
      setShiftHeld(true);
    }
  }

  function upHandler({key}) {
    if (key === 'Shift') {
      setShiftHeld(false);
    }
  }

  useEffect(() => {
    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);
    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, []);

这将根据是否按住 Shift 键将状态更改为 true 或 false。然后您可以将该值插入到您需要的任何地方。提示：您可以使用此格式来侦听任何其他键。我很难找到有关这些键的名称的文档。如果您无法找到键名称，请实现此代码，然后key在.ifdownHandler

另外，请确保将侦听器留在 a 中useEffect，否则会发生数据泄漏。