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

问题背景

在使用 Ant Design Mobile RN 组件库时，开发者可能会遇到一个常见问题：当尝试在 React Native 的原生 Modal 组件内使用 Toast 组件时，Toast 无法正常显示。这种情况在 React Native 0.75.3 版本中尤为明显。

技术分析

层级关系问题

Toast 组件的显示依赖于其在视图层级中的位置。在 React Native 中，原生 Modal 组件具有较高的视图层级，会覆盖在其下方渲染的所有内容。而 Ant Design Mobile RN 的 Toast 组件默认是在应用根层级渲染的，这就导致了当 Toast 尝试在 Modal 内显示时，实际上被 Modal 的视图层级所遮挡。

版本兼容性变化

值得注意的是，这个问题在 React Native 的早期版本中可能不会出现，但随着 React Native 版本的更新（如升级到 0.75.3），Modal 组件的实现方式或层级管理可能发生了变化，导致了这种兼容性问题。

解决方案

Ant Design Mobile RN 在 5.3.0 版本中引入了 useToast Hook，这为解决此问题提供了官方方案。

使用 useToast Hook

1. 初始化 Toast API：在组件中调用 useToast Hook 获取 toastApi 和 contextHolder
2. 渲染 Context Holder：在 Modal 组件内部渲染 contextHolder
3. 使用 toastApi：通过 toastApi 来显示 Toast，而不是直接调用 Toast.show

代码示例

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 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>
  );
}

原理说明

useToast Hook 的工作原理是在调用它的组件位置创建一个 Toast 的上下文环境。通过在 Modal 内部渲染 contextHolder，Toast 实际上会在 Modal 的视图层级内部渲染，从而避免了被 Modal 遮挡的问题。

最佳实践建议

1. 统一使用 useToast：即使不在 Modal 内使用 Toast，也建议统一使用 useToast API，以保持代码一致性
2. 避免混用：不要在同一组件中混用 Toast.show 和 toastApi.show，这可能导致不可预期的行为
3. 考虑性能：对于频繁显示 Toast 的场景，可以考虑复用 toastApi 实例

总结

通过使用 Ant Design Mobile RN 5.3.0 引入的 useToast Hook，开发者可以优雅地解决 Toast 在 React Native Modal 内不显示的问题。这种方法不仅解决了技术难题，还提供了更灵活的 Toast 控制方式，是推荐的最佳实践方案。