如何在 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 紧挨着，所以肉眼看起来好像只是 1 个物体.

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屋！