如何在react-native中使用zIndex

Question

我想要实现以下目标:

以下图片是我现在可以做的,但这不是我想要的.

我现在拥有的代码示例:

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:高于一切.

请注意,父A和元素B都必须绝对定位,并且元素A和元素B都必须是可点击的 ......!

Answer 1

使用elevation的，而不是zIndexAndroid设备

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

这对我来说很好用！

Answer 2

我相信有不同的方法可以根据你的需要做到这一点,但一种方法是将元素A和B放在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>

Answer 3

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

我的架构现在如下所示：

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

B1 和 B2 紧邻，因此肉眼看起来就像是 1 个物体。