React Native 中 Toast 被 react-native-modal 遮挡的解决方案

问题描述

在 React Native 项目中，使用 react-native-modal 弹出 Modal 后，调用 @ant-design/react-native 的 Toast 提示信息，发现 Toast 被 Modal 遮挡，无论怎么调整 zIndex 都不生效。

问题原因

react-native-modal 底层使用的是 React Native 原生的 Modal 组件，它会创建一个独立的原生视图层（类似 Android 的新 Window）。

而 @ant-design/react-native 的 Toast 是通过 Portal 机制渲染到 App 根组件的 Provider 中的。

这两者不在同一个视图树里，所以无论 zIndex 设多高都没用------它们根本不在同一个"世界"里。

官方文档确实没有详细写 Portal.Host 的用法,这个解决方案是从：

1.React Native 的 Portal 机制原理（类似 React 的 createPortal）

2.看 @ant-design/react-native 源码里 Provider 和 Portal 的实现

3.社区 issue 里的讨论和解决方案

Portal.Host 的作用在 react-native-paper 的文档里有解释，ant-design-mobile-rn 的 Portal 实现原理类似

scss 复制代码

App (Provider 里有 Portal.Host)     Modal (独立原生窗口)
├── 页面内容                         ├── Modal 内容
└── Toast 渲染在这里 ❌               └── Toast 应该渲染在这里 ✅

解决方案

在 Modal 内部添加 Portal.Host，让 Toast 渲染到 Modal 内部。

javascript 复制代码

import { Portal } from '@ant-design/react-native';
import Modal from 'react-native-modal';

const MyModal = ({ isVisible, onClose, children }) => {
  return (
    <Modal isVisible={isVisible} onBackdropPress={onClose}>
      {/* Modal 内容 */}
      {children}
      {/* 添加 Portal.Host，让 Toast 渲染到这里 */}
      <Portal.Host />
    </Modal>
  );
};

原理解释

Portal.Host 是 @ant-design/react-native 提供的"传送门容器"。Toast 组件会寻找最近的 Portal.Host 来渲染自己：

默认情况下，Toast 渲染到 App.js 里 <Provider> 中的隐藏 Portal.Host
在 Modal 内添加 <Portal.Host /> 后，Toast 就会渲染到 Modal 内部这个容器里

其他 Toast 库的情况

react-native-toast-message 也存在同样的问题，它的解决方案是在 Modal 内部放一个独立的 <Toast /> 实例：

xml 复制代码

<Modal visible={visible}>
  <View>{/* Modal 内容 */}</View>
  <Toast />  {/* Modal 内的 Toast 实例 */}
</Modal>

本质上是同一个思路：把 Toast 的渲染容器放到 Modal 内部，让它们处于同一个原生视图层级。

总结

这个问题的根本原因是 React Native 原生 Modal 的架构设计，不是某个库的 bug。理解了原理后，解决方案就很清晰：把 Toast 的渲染容器放到 Modal 内部即可。