在 React Native 开发中，我们可以通过 z-index 来改变元素的层级关系，从而影响元素的显示顺序。但是，原生 React Native 并没有提供直接修改 z-index 的方法，因此我们需要借助第三方库来实现这一功能。其中，react-native-zindex-views 是一个非常好用的 npm 包，下面就来详细介绍一下如何使用。
安装
首先，我们需要安装 react-native-zindex-views。在终端输入以下命令：
npm i react-native-zindex-views
使用方法
接下来，我们来介绍一下如何使用 react-native-zindex-views。
第一步：引入组件
在需要使用 z-index 功能的组件中，引入 react-native-zindex-views 组件。
import ZIndexView from "react-native-zindex-views";
第二步：定义 zIndex 值
在组件中定义一个 zIndex 值。例如，我们定义一个变量 zIndex，并默认赋值为 1。
let zIndex = 1;
第三步：设置组件的 zIndex
将组件包裹在 ZIndexView 组件中，并设置 zIndex 属性。
<ZIndexView zIndex={zIndex}>
<Text>This is a z-index test.</Text>
<ZIndexView>第四步：修改 zIndex 值
在合适的时机，通过修改 zIndex 变量的值，来动态改变组件的层级关系。
zIndex = 2;
示例代码
下面是一个完整的代码示例。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ----------- ---------------- - ---- ---------------
------ ---------- ---- ----------------------------
------ ------- -------- ----- -
----- -------- ---------- - ------------
----- ----------- - -- -- -
---------------- - ---
--
------ -
----- -------------------------
----- ----------------------
----- ------------------------ -- - ------ ------------
-------
----------- --------------- ----------------------
----- ------------------------ -- - ------ ------------
----------------- --------------------- ----------------------
----- -------------------------------- --------------
-------------------
-------------
----- -------------------
----- ------------------------ -- - --- ------------
-------
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- -------
--
------- -
--------- -----------
------- --
---------------- -------
-------- ---
--
------- -
--------- -----------
---------------- --------
-------- ---
----------- ---------
--
---- -
--------- -----------
---- --
---------------- ------
-------- ---
--
----- -
------ --------
--------- ---
----------- -------
--
------- -
---------- ---
---------------- --------
-------- ---
------------- --
--
----------- -
------ --------
--------- ---
--
---通过修改中间区域的 zIndex 值，我们可以动态改变中间区域与其他区域的层级关系。在上面的示例代码中，点击按钮会让中间区域的层级关系上升一个层级，使其覆盖在红色区域之上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6a81e8991b448db2e6