Javascript 如何在 react-native 中使用 zIndex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41943191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use zIndex in react-native
提问by SudoPlz
I've want to achieve the following:
我想实现以下目标：
The following images are what I can do right now, but that's NOT what I want.
下面的图片是我现在可以做的，但这不是我想要的。
Sample of code I have right now:
我现在拥有的代码示例：
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>
);
}
To put it in words, I want
用语言来说，我想要
- Parent A:to be below everything.
- Element B:to be at the above parent A but below element A.
- Element A:above everything.
- 家长A：要低于一切。
- 元素 B：在父元素 A 之上但在元素 A 之下。
- 元素A：高于一切。
Note that Parent Aand Element Bboth have to be absolutelypositioned, and both elements A and elements B have to be clickable...!
请注意，父 A和元素 B都必须绝对定位，并且元素 A 和元素 B 都必须可点击......！
采纳答案by SudoPlz
I finally solved this by creating a second object that imitates B.
我最终通过创建模仿 B 的第二个对象解决了这个问题。
My schema now looks like this:
我的架构现在看起来像这样：
I now have B1 (within parent of A) and B2 outside of it.
我现在有 B1（在 A 的父级内）和 B2 在它之外。
B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.
B1 和 B2 紧挨着彼此，所以肉眼看起来好像只是 1 个物体。
回答by Matt Aft
I believe there are different ways to do this based on what you need exactly, but one way would be to just put both Elements A and B inside Parent A.
我相信根据您的需要有不同的方法可以做到这一点，但一种方法是将元素 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>
回答by Mike S.
回答by Suleiman AbdulMajeed
Use elevate instead of zIndex for android devices
在安卓设备上使用 elevate 而不是 zIndex
elevatedElement: {
zIndex: 3, // works on ios
elevate: 3, // works on android
}
This worked fine for me!
这对我来说很好用！
回答by 1pocketaces1
You cannot achieve the desired solution with CSS z-index either, as z-index is only relative to the parent element. So if you have parents A and B with respective children a and b, b's z-index is only relative to other children of B and a's z-index is only relative to other children of A.
您也无法使用 CSS z-index 实现所需的解决方案，因为 z-index 仅与父元素相关。因此，如果您的父母 A 和 B 分别有孩子 a 和 b，那么 b 的 z-index 仅与 B 的其他孩子相关，而 a 的 z-index 仅与 A 的其他孩子相关。
The z-index of A and B are relative to each other if they share the same parent element, but all of the children of one will share the same relative z-index at this level.
如果 A 和 B 共享相同的父元素，则它们的 z-index 是相对的，但一个的所有子元素将在此级别共享相同的相对 z-index。
