如何在iOS上按Escape键关闭React Native Modal？

React Native原生Modal组件确实默认不支持通过Escape键关闭，onRequestClose回调主要针对Android平台的物理返回键，而非键盘的Escape事件。以下是无需依赖第三方库、也不需要TextInput的解决方案：

核心思路 #

通过监听全局键盘的keydown事件，在Modal处于打开状态时，捕获Escape键的触发，调用你的关闭方法。

类组件实现示例 #

针对你提供的类组件代码，添加事件监听逻辑：

import { Modal, View } from "react-native";

class YourComponent extends React.Component {
  // 键盘事件处理函数
  handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      this.closeModal();
    }
  };

  componentDidUpdate(prevProps) {
    // Modal打开时注册监听，关闭时移除监听
    if (this.props.isOpen && !prevProps.isOpen) {
      document.addEventListener('keydown', this.handleKeyDown);
    } else if (!this.props.isOpen && prevProps.isOpen) {
      document.removeEventListener('keydown', this.handleKeyDown);
    }
  }

  componentWillUnmount() {
    // 组件卸载前确保移除监听，避免内存泄漏
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  closeModal = () => {
    // 你的关闭Modal逻辑
    this.setState({ isOpen: false });
  };

  render() {
    const { isOpen } = this.props;
    return (
      <Modal
        visible={isOpen}
        transparent={true}
        animationType={"fade"}
        onRequestClose={() => {
          console.log("On request close");
          this.closeModal();
        }}
      >
        <View>
          // 其他UI元素
        </View>
      </Modal>
    );
  }
}

函数组件实现示例 #

如果使用函数式组件+Hook，逻辑类似：

import { Modal, View } from "react-native";
import { useEffect } from "react";

const YourComponent = ({ isOpen, closeModal }) => {
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') {
        closeModal();
      }
    };

    // 仅在Modal打开时添加监听
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
    }

    // 清理函数：移除监听
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, closeModal]);

  return (
    <Modal
      visible={isOpen}
      transparent={true}
      animationType={"fade"}
      onRequestClose={() => {
        console.log("On request close");
        closeModal();
      }}
    >
      <View>
        // 其他UI元素
      </View>
    </Modal>
  );
};

注意事项 #

• 该方案适用于React Native Web、桌面端（如Electron集成的RN应用）场景，原生移动平台（iOS/Android）无Escape键，无需处理。
• 务必在Modal关闭或组件卸载时移除事件监听，避免内存泄漏。

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