本文旨在讲解如何在 React Native 应用中，像 Ant Design 的 message 组件一样，通过函数调用来动态渲染外部组件，例如 Toast、Modal 等。核心思路是利用 ReactDOM.createPortal 将组件渲染到文档的特定位置，并结合 document fragment 创建新的根节点进行渲染，从而实现无需在主组件中维护状态即可触发组件显示的效果。

在 React Native 开发中，我们有时希望能够像 Ant Design 的 message.success() 方法一样，通过一个简单的函数调用来显示 Toast、Modal 等组件，而无需在主组件中维护状态或条件渲染。以下是一种实现此功能的方案，该方案借鉴了 Ant Design 的实现思路，并结合了 ReactDOM.createPortal 和 document fragment。

核心思路：

1. 创建可复用的组件: 首先，你需要创建一个可复用的 React 组件，例如 Toast 组件，用于展示提示信息。
2. 使用 ReactDOM.createPortal: 使用 ReactDOM.createPortal 将 Toast 组件渲染到文档的特定位置，例如 document.body。createPortal 允许你将子组件渲染到 DOM 树的不同位置，即使它在 React 组件树中的位置不同。
3. 创建 document fragment 和根节点: 创建一个 document fragment，并使用 ReactDOM.createRoot 在该 fragment 上创建一个新的根节点。然后，将包含 Toast 组件的 portal 渲染到该根节点。
4. 定义触发函数: 定义一个函数，例如 showToast(message)，该函数负责创建包含 Toast 组件的 portal，并将其渲染到 document fragment 创建的根节点。

示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client';

const Toast = ({ msg }) => {
  return 
Toast: {msg}
;
};

const ToastPortal = (props) => {
  return ReactDOM.createPortal(, document.body);
};

const showToast = (msg) => {
  const fragment = document.createDocumentFragment();
  ReactDOM.createRoot(fragment).render();
};

const App = () => (
   showToast('Hello world!')}>Show Toast
);

ReactDOM.createRoot(document.body).render();

代码解释：

X Detector

最值得信赖的多语言 AI 内容检测器

下载

• Toast 组件：一个简单的 React 组件，用于显示 Toast 消息。
• ToastPortal 组件：使用 ReactDOM.createPortal 将 Toast 组件渲染到 document.body。
• showToast 函数：
  • 创建一个 document fragment。
  • 使用 ReactDOM.createRoot 在 fragment 上创建一个新的根节点。
  • 使用 ReactDOM.render 将 ToastPortal 组件渲染到该根节点。
• App 组件：包含一个按钮，点击按钮时调用 showToast 函数。

注意事项：

• 确保你的 React 版本支持 ReactDOM.createPortal (React 16 及以上)。
• 在 React Native 环境中，document.body 可能需要特殊处理。你可以使用 react-native-root-siblings 或类似的库来创建一个根视图，并将 portal 渲染到该视图中。
• document fragment 在添加到 DOM 之前，不会引起页面的重新渲染。这有助于提高性能。
• 在更复杂的场景中，你可能需要管理多个 Toast 的显示和隐藏，例如使用队列或状态管理库。

总结：

通过结合 ReactDOM.createPortal 和 document fragment，我们可以实现一种优雅的方式，在 React Native 应用中通过函数调用来动态渲染外部组件。这种方法避免了在主组件中维护状态的复杂性，使代码更加简洁和易于维护。希望本文能够帮助你理解和应用这种技术。