如何在react-native中使用zIndex [英] How to use zIndex in react-native

问题描述

我要实现以下目标:

以下图像是我现在可以做的，但是那不是我想要的.

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

用语言表达，我想要

• 父项A:低于一切.
• 元素B:位于父A上方，但位于元素A下方.
• 元素A:.

• 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和元素B都必须可点击 ...！

Note that Parent A and Element B both have to be absolutely positioned, and both elements A and elements B have to be clickable...!

推荐答案

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

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

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

My schema now looks like this:

我现在有B1(在A的父级内)和B2在其外.

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

B1和B2彼此相邻，所以用肉眼看起来好像只是一个物体.

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

这篇关于如何在react-native中使用zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！