介绍
23mofang-react-native-root-siblings 是一个 React Native 组件，用于将一个组件渲染在应用程序的任何位置，而不需要在特定的父级组件中进行渲染。
这个组件使得创建 modal 和 tooltip 等弹框非常方便。此外，这个组件的最大优点是可以在组件树的任何位置轻松调用，而不需要难以处理的布局层次结构。
安装
通过 npm 安装此组件：
npm install 23mofang-react-native-root-siblings --save
使用
在你需要的组件或页面中导入要使用的组件：
import RootSiblings from '23mofang-react-native-root-siblings';
接下来是一个使用示例。首先，我们需要创建两个 React Native 页面，分别为 Home 和 Modal。然后，我们在 Home 页面中添加一个按钮，当用户点击该按钮时，我们会使用 RootSiblings 组件创建 Modal，并将其显示在应用程序中。
Home 页面
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------------ ---- --------------------------------------
------ ----- ---- ----------
------ ------- ----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
------------- ------
--
-
--------- - -- -- -
---------- - --- ------------------- ----
--------------- ------------- ---- ---
--
--------- - -- -- -
-- ----------- ---------- ------------- -
---------------------
-
--------------- ------------- ----- ---
--
-------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
---------- -------------
----------------- -------------------------
---------- ------------
-------------------
-------
--
-
-在这个代码中，我们定义了两个函数 showModal 和 hideModal，它们分别用于显示和隐藏 Modal。
当 showModal 函数被调用时，我们创建一个新的 RootSiblings 实例，并将 Modal 组件作为参数传递给它。这将导致 Modal 的渲染并显示到应用程序中。
要关闭 Modal，请使用 hideModal 函数。首先，我们检查 modal 实例是否属于 RootSiblings 类型，如果是，则调用它的 destroy 函数以删除 Modal，并将 modalVisible 属性设置为 false。
Modal 页面
接下来，我们需要创建 Modal 组件。这个组件可以是任何你想要的东西，包括表单、列表或任何其他内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------- ----- ----- ------- --------------- -
-------- -
------ -
-----
--------
--------- -----------
---- --
----- --
------- --
------ --
--------------- ---------
----------- ---------
---------------- -------- -- -- ------
--
-
----- -------- ---------------- -------- -------- -- ---
---------- -- - ------------
----------------- -----------------------------
----------- ------------
-------------------
-------
-------
--
-
-这个组件简单地渲染了一个背景为黑色半透明的底层 View，然后在其中渲染了一个包含文本和一个关闭按钮的白色 View。
需要注意的是，在这个代码中，我们使用 this.props.onClose 回调来响应关闭按钮的点击事件。这个回调函数需要从 Home 组件中传递进来，以便在触发模态框关闭事件时可以正确地关闭模态框。
完整示例
最后，以下是完整例子的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------------ ---- --------------------------------------
------ ----- ---- ----------
------ ------- ----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
------------- ------
--
-
--------- - -- -- -
---------- - --- ------------------- ------------------------ ----
--------------- ------------- ---- ---
--
--------- - -- -- -
-- ----------- ---------- ------------- -
---------------------
-
--------------- ------------- ----- ---
--
-------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
---------- -------------
----------------- -------------------------
---------- ------------
-------------------
-------
--
-
-
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------- ----- ----- ------- --------------- -
-------- -
------ -
-----
--------
--------- -----------
---- --
----- --
------- --
------ --
--------------- ---------
----------- ---------
---------------- -------- -- -- ------
--
-
----- -------- ---------------- -------- -------- -- ---
---------- -- - ------------
----------------- -----------------------------
----------- ------------
-------------------
-------
-------
--
-
-小结
在这篇文章中，我们介绍了 23mofang-react-native-root-siblings 组件，并展示了如何使用它来创建在 React Native 应用程序中的弹出层。使用这个组件，你可以在应用程序中轻松地创建 modal 和 tooltip 等弹框，并将它们渲染在任何位置，而不需要考虑父组件的布局层次结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671d81e8991b448e381b