关闭Native-base Modal后Android端屏幕冻结问题

问题说明 #

所有包含Modal的页面在Android端关闭Modal后，会出现屏幕完全冻结、无法点击任何内容的情况，iOS端运行正常。复现步骤为：打开Modal → 关闭Modal → 尝试交互页面元素（如输入框）即可触发问题。

原组件代码 #

export function BaseModal({ isVisible, onClose, children }: BaseModalProps) {
  return (
    <Modal isOpen={isVisible} onClose={onClose} size="lg">
      <Modal.Content py={4} px={4}>
        <Modal.CloseButton />
        {children}
      </Modal.Content>
    </Modal>
  );
}

问题原因 #

该问题通常是由于Modal关闭后，遮罩层（backdrop）未被正确移除，或者组件状态不同步导致DOM残留元素阻挡了底层交互，属于部分UI组件库在Android端的兼容性bug。

修复方案 #

方案1：手动控制遮罩层与组件清理 #

通过useRef和useEffect监听Modal显示状态，确保关闭时彻底清理相关元素，同时手动控制遮罩层的显示：

import { useEffect, useRef } from 'react';

export function BaseModal({ isVisible, onClose, children }: BaseModalProps) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (!isVisible && modalRef.current) {
      // 确保Modal关闭时执行完整的清理逻辑
      modalRef.current.close?.();
    }
  }, [isVisible]);

  return (
    <Modal
      ref={modalRef}
      isOpen={isVisible}
      onClose={onClose}
      size="lg"
      // 仅在Modal显示时渲染遮罩层
      backdrop={isVisible ? 'opaque' : 'none'}
    >
      <Modal.Content py={4} px={4}>
        <Modal.CloseButton />
        {children}
      </Modal.Content>
    </Modal>
  );
}

方案2：升级UI组件库版本 #

如果使用的是NativeBase、Expo UI等第三方组件库，检查并升级到最新版本——不少类似的Android端Modal兼容性问题已在新版本中修复。

方案3：状态同步检查 #

确认父组件中控制isVisible的状态是否在Modal关闭时被正确设置为false，避免因状态不同步导致Modal残留渲染。

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