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：高于一切。

请注意， Parent A 和 Element B 都必须绝对定位，并且元素A和元素B都必须点击？！

Answer 1

在Android设备上使用elevation代替zIndex

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

这对我来说很好！

Answer 2

我相信根据您的需要，有不同的方法可以做到这一点，但一种方法是将元素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>

Answer 3

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

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

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

B1和B2彼此相邻，所以肉眼看来它只是一个物体。

Answer 4

更新：据说，zIndex已添加到react-native库中。我一直试图让它成功而没有成功。检查here以了解修复的详细信息。

Answer 5

您也无法通过CSS z-index实现所需的解决方案，因为z-index仅相对于父元素。因此，如果您的父母A和B分别带有孩子a和b，则b的z索引仅相对于B的其他孩子，而a的z索引仅相对于A的其他孩子。

如果A和B共享相同的父元素，则A和B的Z索引是相对的，但是在这个级别上，一个子的所有子元素都将共享相同的相对Z索引。

Answer 6

您可以在样式表中使用 Elevation 属性

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

如何在react-native中使用zIndex

6 个答案: