Javascript 如何在react native中使用zIndex

我希望实现以下目标：

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

我现在拥有的代码示例：

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>
    );
}

renderA（）{
返回(
//父母
//元素A
//元素A
);
}
renderB（）{
返回(
//元素B
);
}
render（）{
返回(
{this.renderA（）}
{this.renderB（）}
);
}

用语言来说，我想要

• 父级A:低于一切
• 元素B:位于上面的父元素A但低于元素A
• 元素A:高于一切

---

请注意，父级A和元素B都必须绝对定位，元素A和元素B都必须可点击

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

//一个
//元素A
//元素A
//元素B

我最终解决了这个问题，创建了第二个模仿B的对象

我的模式现在如下所示：

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

---

B1和B2紧挨着一个，所以在肉眼看来，它似乎只是一个对象。

更新：据推测，

zIndex

已添加到

react native

库中。我一直试图让它工作，但没有成功。检查修复的详细信息。

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

---

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

对于android设备，使用

提升

，而不是

zIndex

elevatedElement：{
zIndex:3，//在ios上工作
标高：3，//在android上工作
}

---

这对我很管用

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

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

---

我想到了，但我必须保持结构不变。。！我有一个很好的理由不想在视图的父视图中添加元素B。我简化了我的问题，但是有很多父视图包含很多元素A。不过我很感激你的回答，谢谢。我认为不可能按照你想要的方式来做。首先计算父级的Z指数，然后将子级与其他子级进行比较。下面是一篇类似的文章，内容更为详细：嗯，我想保留最后一幅图像（第三个场景），但也就是说，忽略父级a上的接触（无论如何都是透明的），让事件传递到元素B，即使它在父级a之下。当然，如果渲染了元素a，它应该始终接收触摸处理程序。实际上，这可能会起作用…在父级A上将pointerEvents设置为“box none”。这将使元素A可单击，并且您将能够通过父级单击以到达其后面的元素B。添加至少使用正确的语法。。。style={{}这看起来更像是一个克卢格，而不是一个可复制的解决方案。有人有更工程化的解决方案吗？我记得你说过你不想让B成为a的父母。这比最上乘的答案好多少？它按预期工作。在玩了一会儿之后，我想出了如何正确使用它。手机的样式设计看起来总是很简单，但事实并非如此。你刚刚在Android上完成了一整天的调试。Android上的“提升”，而不是“zIndex”。啊！这似乎偏离了标准CSS。“标高”应该会影响落差阴影等；仅美观，不可与z-index相比。在两个平台上都很好。对于我来说，立面仅在视觉上解决了问题，即以前隐藏的元素现在可见，但在此状态下，它们不再交互（即无法单击按钮等）。唯一的解决方案（至少对于Android）似乎是元素的适当排序。你也为我结束了一天的调试