在 React Native 中，实现弹出层 (Modal) 功能可以使用 React Native 提供的 Modal 组件，但它有一个限制：必须将 Modal 放在渲染树中的最高层级上。
这意味着当我们在某个组件内部需要显示 Modal 时，必须将 Modal 的渲染代码放在组件外面。而这样做会导致一些问题：
- 在 Modal 之上的其他组件无法正常响应用户交互；
- 无法直接控制 Modal 的位置和样式。
为了解决这些问题，我们可以使用 Portal 技术。Portal 可以将某个组件的子节点渲染到 App 的根节点下，这样我们就可以轻松地控制 Modal 的位置和样式，并且不会影响其他组件的交互。
如何实现 Portal
在 React Native 中，我们可以使用 createPortal 方法来实现 Portal。这个方法需要两个参数：
- 要渲染的子节点；
- 渲染到的父节点。
在实际使用中，我们通常会将 Portal 放在一个单独的组件中，然后在需要使用弹出层的组件中引用这个 Portal 组件，并将 Modal 的渲染代码作为 Portal 的子节点传入。
下面是一个简单的 Portal 实现示例：
------ ----- ---- --------
------ - ----- ----- - ---- ---------------
----- ------ - -- -------- -- -- -
----- --------- ----------- - ----------------------
----- --------- - -- -- -----------------
----- --------- - -- -- ------------------
------ -
----------------
---------------------
------ ----------------- ---------------------------
----- -------- ----- - -------------------------------
--------
-----------------
--
--
------ ------- -------在上面的代码中，我们定义了一个 Portal 组件，并使用 useState Hook 来管理 Modal 的显示状态。showModal 和 hideModal 函数分别用于显示和隐藏 Modal。
Portal 组件接收一个函数作为子节点，并将 showModal 函数作为参数传递给这个函数。当子节点调用 showModal 函数时，Modal 就会显示出来。
在 Modal 中，我们再次将子节点传递给 Portal，并将 hideModal 函数作为参数传递给这个子节点。当子节点需要关闭 Modal 时，就可以调用 hideModal 函数。
需要注意的是，在 Portal 中使用 Fragment 包裹子节点，是因为 Portal 组件只能有一个根元素。
如何使用 Portal
使用 Portal 的步骤如下：
- 在 App 根节点处渲染 Portal 组件；
- 在需要弹出 Modal 的组件中，引用 Portal 组件，并将 Modal 的渲染代码作为 Portal 的子节点传入。
下面是一个使用 Portal 的示例代码：
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------ ---- -----------
----- --- - -- -- -
------ -
----- -------- ----- - ---
---------- ----- ------ ---------
--------
------------ -- -
----------------- --------------------
------------ ------------
-------------------
--
---------
-------
--
--
------ ------- ----在上面的代码中，我们将 Portal 放在 App 根节点下，然后在需要弹出 Modal 的组件中引用 Portal 组件，并将 Modal 渲染代码作为 Portal 的子节点传入。
总结
使用 Portal 技术可以轻松地实现弹出层功能，并且不会影响其他组件的交互。在 React Native 中，我们可以使用 createPortal 方法来实现 Portal
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32689