React Native如何检测Shift键按下？适配苹果硅MacBook输入场景

针对你使用expo: ~52.0.31和react-native: 0.76.7开发Mac Catalyst应用时遇到的Shift+Enter组合键检测问题，可尝试以下两种方案：

方案一：使用onKeyDown替代onKeyPress #

React Native的TextInput组件的onKeyPress事件不会暴露修饰键（如Shift）的状态，但onKeyDown事件的nativeEvent对象通常包含shiftKey属性。替换事件处理器后即可直接判断组合键：

const handleKeyDown = (event) => {
  if (event.nativeEvent.key === 'Enter' && event.nativeEvent.shiftKey) {
    // 执行你的提交逻辑
    console.log('Shift+Enter触发提交');
  }
};

// 在TextInput中使用
<TextInput
  onKeyDown={handleKeyDown}
  // 其他必要属性（如placeholder、value等）
/>

方案二：手动维护Shift键状态 #

如果onKeyDown的shiftKey属性仍无法获取，可通过监听Shift键的按下/抬起事件，维护一个状态变量来跟踪Shift键的激活状态，再结合Enter键的触发判断组合键：

import { useState } from 'react';
import { TextInput } from 'react-native';

const InputComponent = () => {
  const [isShiftPressed, setIsShiftPressed] = useState(false);

  const handleKeyDown = (event) => {
    if (event.nativeEvent.key === 'Shift') {
      setIsShiftPressed(true);
    } else if (event.nativeEvent.key === 'Enter' && isShiftPressed) {
      // 执行提交逻辑
      console.log('Shift+Enter触发提交');
    }
  };

  const handleKeyUp = (event) => {
    if (event.nativeEvent.key === 'Shift') {
      setIsShiftPressed(false);
    }
  };

  return (
    <TextInput
      onKeyDown={handleKeyDown}
      onKeyUp={handleKeyUp}
      // 其他必要属性
    />
  );
};

关于React Native支持情况 #

当前react-native: 0.76.7对Mac Catalyst平台的键盘修饰键支持存在局限性，若上述方案均无效，可尝试升级Expo/RN版本（如Expo 53+或RN 0.77+），这类版本通常会优化桌面端的键盘事件处理。若问题仍存在，可考虑向React Native官方仓库提交issue反馈。

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