Как использовать zIndex в реакции-родной

Я хочу добиться следующего:

Следующие изображения - это то, что я могу сделать прямо сейчас, но это НЕ то, что я хочу.

Пример кода, который у меня есть прямо сейчас:

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 и E B должны быть абсолютно позиционированы, и оба элемента A и элементы B должны быть интерактивными...!

Ответ 1

Я, наконец, решил это, создав второй объект, который имитирует B.

Теперь моя схема выглядит так:

Теперь у меня есть B1 (внутри родителя A) и B2 вне его.

B1 и B2 находятся рядом друг с другом, поэтому невооруженным глазом выглядит так, как будто это всего лишь один объект.

Ответ 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>

Ответ 3

UPDATE: Предположительно, zIndex было добавлено в react-native библиотеки. Я пытался заставить его работать без успеха. Проверьте здесь подробные сведения об исправлении.

Ответ 4

Вы также не можете достичь желаемого решения с помощью CSS z-index, поскольку z-index относится только к родительскому элементу. Поэтому, если у вас есть родители A и B с соответствующими детьми a и b, b z-индекс относится только к другим детям B, а z-индекс относится только к другим детям A.

Z-индекс A и B относительно друг друга, если они имеют один и тот же родительский элемент, но все дети одного из них будут иметь один и тот же относительный z-индекс на этом уровне.