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

问题背景

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

技术分析

层级关系问题

Toast 组件的工作原理是通过在应用顶层添加一个悬浮层来显示提示信息。而 React Native 的原生 Modal 组件具有特殊的层级结构，它会覆盖在应用常规视图层级之上。这种层级关系导致了 Toast 无法在 Modal 内部正常显示。

版本兼容性变化

值得注意的是，这个问题在 React Native 的早期版本中可能并不存在，但随着 React Native 版本的升级（特别是 0.75.x 系列），Modal 组件的实现方式发生了变化，导致了与 Toast 组件的兼容性问题。

解决方案

Ant Design Mobile RN 在 5.3.0 版本中引入了新的 API 来解决这个问题：

使用 useToast Hook

新的 useToast Hook 提供了更灵活的 Toast 控制方式，可以确保 Toast 在 Modal 内部正常显示。使用方法如下：

1. 在组件顶部引入并使用 useToast Hook
2. 获取 toastApi 和 contextHolder
3. 在 Modal 内部渲染 contextHolder
4. 使用 toastApi 代替原来的 Toast 静态方法

代码示例

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：即使不在 Modal 内部，也建议使用新的 useToast API，以保持代码一致性
2. 避免混用 Provider：在使用 useToast 时，不再需要额外的 Provider 包裹
3. 考虑动画效果：如果应用中有复杂的 Modal 动画需求，可以结合 useToast 和自定义动画实现更好的用户体验

总结

Ant Design Mobile RN 通过引入 useToast Hook 解决了 Toast 在 Modal 内不显示的问题，这体现了组件库对开发者实际需求的响应能力。开发者应当及时更新到 5.3.0 或更高版本，并采用新的 API 来确保应用功能的稳定性。