如何在 react-native 中使用 zIndex

Posted 2023-02-22

【中文标题】如何在 react-native 中使用 zIndex

【英文标题】：How to use zIndex in react-native

【发布时间】：2017-06-16 00:58:02

【问题描述】：

我想实现以下目标：

以下图片是我现在可以做的，但这不是我想要的。

我现在拥有的代码示例：

renderA() 
    return (
        <View style= position: 'absolute', zIndex: 0 >    // parent of A
            <View style= zIndex: 2 >  // element A
            </View>
            <View style= zIndex: 2 >  // element A
            </View>
        </View>
    );


renderB() 
    return (
        <View style= position: 'absolute', zIndex: 1 >    // element B
        </View>
    );



render() 
    return (
        <View>
            this.renderA()
            this.renderB()
        </View>
    );

一句话，我想要

家长 A：

低于一切。

元素 B：

位于父元素 A 之上但元素 A 之下。

元素 A：

高于一切。

注意Parent A和Element B都必须绝对定位，并且元素A和元素B都必须可点击...！

【参考方案1】：

我相信根据您的确切需要有不同的方法可以做到这一点，但一种方法是将元素 A 和 B 都放在父 A 中。

<View style= position: 'absolute' >    // parent of A
  <View style= zIndex: 1  />  // element A
  <View style= zIndex: 1  />  // element A
  <View style= zIndex: 0, position: 'absolute'  />  // element B
</View>

【讨论】：

我想到了，但我必须保持结构不变..！我不想在 A 视图的父级中添加元素 B 是有充分理由的。我简化了我的问题，但是有很多 parent of A 视图包含很多元素 A。不过，我感谢您的回答，谢谢。

我认为不可能按照您想要的方式进行。将首先评估父级的 Z-index，然后将子级与其他子级进行比较。这是一篇类似的帖子，其中有更详细的说明：***.com/questions/7490146/…

嗯，我在想保留最后一张图片（第三种情况），但即忽略对 父 A 的触摸（无论如何这将是透明的）并让事件通过到 element B，即使它低于 parent A。当然，如果 element A 被渲染，它应该总是接收到触摸处理程序。

实际上，这可能有效...在父 A 上将 pointerEvents 设置为“box-none”。这将使元素 A 可点击，并且您将能够单击父元素以到达元素 B在它后面。

添加最少使用正确的语法... style=

【参考方案2】：

我终于通过创建第二个模仿 B 的对象解决了这个问题。

我的架构现在看起来像这样：

我现在有 B1（在 A 的父级内）和 B2 之外。

B1 和 B2 紧挨着，所以在肉眼看来它只是一个物体。

【讨论】：

这似乎更像是一个 kluge，而不是一个可重复的解决方案。谁有更工程化的解决方案？

我以为你说过你不希望 B 成为 A 的父级。这比最受支持的答案有什么好处？

***.com/questions/41943191/…

【参考方案3】：

更新：据说zIndex 已添加到react-native 库中。我一直试图让它工作但没有成功。查看here 了解修复的详细信息。

【讨论】：

它按预期工作。在玩了一会儿之后，我想出了如何正确使用它。移动设备的样式设计总是看起来看似简单，但实际上并非如此。

【参考方案4】：

您也无法使用 CSS z-index 实现所需的解决方案，因为 z-index 仅与父元素相关。因此，如果您的父母 A 和 B 有各自的孩子 a 和 b，则 b 的 z-index 仅相对于 B 的其他孩子，而 a 的 z-index 仅相对于 A 的其他孩子。

如果 A 和 B 共享相同的父元素，则它们的 z-index 是相对于彼此的，但其中一个的所有子元素将在此级别共享相同的相对 z-index。

【参考方案5】：

在安卓设备上使用elevation 而不是zIndex

elevatedElement: 
  zIndex: 3, // works on ios
  elevation: 3, // works on android

这对我来说很好用！

【讨论】：

你刚刚结束了一整天的 Android 调试。 Android 上的“海拔”，而不是“zIndex”。啊！这似乎与标准 CSS 有偏差。 “海拔”应该会影响阴影等；仅具有美学效果，无法与 z-index 进行比较。

在两个平台上都可以正常工作

对我来说，海拔只是视觉上解决了问题，即以前隐藏的元素现在可见，但在这种状态下它们不再是交互式的（即按钮等不能被点击）。唯一的解决方案（至少对于 Android 而言）似乎是元素的适当排序。

你也结束了我一天的调试

【参考方案6】：

您可以在样式表中使用 Elevation 属性

containerText: 
    elevation: 3,
    backgroundColor: '#FB8500',
    padding: 3,
    borderRadius: 15,
    marginTop: -30,
    marginLeft: -10,
  ,