Ant Design Mobile RN 中 Toast 在 Modal 内不显示的解决方案

问题背景

在使用 Ant Design Mobile RN（简称 antd-mobile-rn）开发 React Native 应用时，开发者可能会遇到一个常见问题：当使用 React Native 原生的 Modal 组件时，antd-mobile-rn 的 Toast 组件无法正常显示。这个问题在 React Native 0.75.3 版本中尤为明显。

问题分析

Toast 组件的工作原理是通过在应用顶层创建一个悬浮层来显示提示信息。然而，React Native 的原生 Modal 组件具有特殊的层级结构，它会创建一个新的视图层级，覆盖在应用主视图之上。这种设计导致 Toast 组件无法突破 Modal 的层级限制，从而无法显示。

解决方案演进

传统方案

在 antd-mobile-rn 5.2.3 及更早版本中，常见的解决方案是使用 antd-mobile-rn 自带的 Modal 组件替代 React Native 的原生 Modal。这是因为 antd-mobile-rn 的 Modal 组件在设计时就考虑了与其他组件的兼容性。

现代方案

从 antd-mobile-rn 5.3.0 版本开始，引入了新的 useToast Hook API，这为解决此问题提供了更优雅的方案。新 API 允许开发者在 Modal 内部直接管理 Toast 的显示，而不需要替换 Modal 组件。

具体实现

使用 useToast Hook 的典型代码如下：

import {Button, Modal, View} from "react-native";
import {Toast} from "@ant-design/react-native";
import {useState} from "react";

export default function ProfilePage(props) {
  const [visible, setVisible] = useState(false);
  const [toastApi, contextHolder] = Toast.useToast();
  
  return (
    <View style={{flex: 1, paddingTop: 100}}>
      <Button title={"Show Toast"} onPress={() => {
        Toast.show("Hello world", 2, false);
      }}/>
      <Button title={"Show Modal"} onPress={() => setVisible(true)}/>
      <Modal visible={visible}>
        {contextHolder}
        <View style={{height: 400, backgroundColor: "blue"}}>
          <Button title={"Show Toast on Modal"} onPress={() => {
            toastApi.show("Hi, show on modal?", 2, false);
          }}/>
          <Button title={"Close Modal"} onPress={() => setVisible(false)}/>
        </View>
      </Modal>
    </View>
  );
}

关键点解析

1. useToast Hook：通过调用 Toast.useToast() 获取 toastApi 和 contextHolder
2. contextHolder：必须在 Modal 内部渲染，用于提供 Toast 的显示上下文
3. toastApi：替代原来的全局 Toast 方法，在 Modal 内部使用

最佳实践建议

1. 对于新项目，建议直接使用 5.3.0 及以上版本，并采用 useToast 方案
2. 对于已有项目，如果已经大量使用 React Native 原生 Modal，升级到 5.3.0 后可以逐步迁移到 useToast 方案
3. 注意 contextHolder 的渲染位置，它应该位于需要显示 Toast 的组件层级中

总结

antd-mobile-rn 5.3.0 引入的 useToast Hook 有效解决了 Toast 在 Modal 内不显示的问题，同时保持了与 React Native 原生 Modal 的兼容性。这种方案既保留了开发灵活性，又提供了良好的用户体验，是当前推荐的最佳实践。