如何在本地反应中使用 zIndex

我想达到以下目标:

enter image description here

下面的图片是我现在能做的，但那不是我想要的。 scenarioAscenarioB

我现在有一个代码示例:

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: 凌驾于一切之上。

请注意，家长甲和 元素 B都必须是 当然定位，元素 A 和元素 B 都必须是 可以点击... ！

210118 次浏览
小开

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.

<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>
小开
最佳答案

I finally solved this by creating a second object that imitates B.

My schema now looks like this:

enter image description here

I now have B1 (within parent of A) and B2 outside of it.

B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.

小开

UPDATE: Supposedly, zIndex has been added to the react-native library. I've been trying to get it to work without success. Check here for details of the fix.

小开

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.

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.

小开

Use elevation instead of zIndex for android devices

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

This worked fine for me!

小开

You can use the Elevation property in your StyleSheet

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

Try to use zIndex for iOS and elevation for android devices to stack the view on top of one another.

element: {
zIndex: 1, // 1 for stacking the element on top of the previous element and -1
// for stacking the element under the above previous element.
elevation: 1,
}

提交答案