webentwicklung-frage-antwort-db.com.de

Verwendung des z-Index in reaktiver Natur

Ich möchte folgendes erreichen:

enter image description here

Die folgenden Bilder können ich jetzt machen, aber das ist NICHT das, was ich will . scenarioA scenarioB

Code-Beispiel, den ich gerade habe:

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

Um es in Worte zu fassen, möchte ich 

  • Elternteil A: unter allem sein.
  • Element B: bei obigem übergeordneten A, aber unter Element A.
  • Element A: über allem.

Beachten Sie, dass Parent A und Element B beide absolut positioniert sein müssen und beide Elemente A und Elemente B anklickbar sein müssen!

javascriptreact-nativeflexbox
21
SudoPlz

Ich löste dies schließlich durch Erstellen eines zweiten Objekts, das B imitiert.

Mein Schema sieht jetzt so aus:

 enter image description here

Ich habe jetzt B1 (innerhalb von Eltern von A) und B2 außerhalb davon.

B1 und B2 liegen direkt nebeneinander. Für das bloße Auge sieht es also so aus, als wäre es nur ein Objekt.

4
SudoPlz

Ich glaube, es gibt verschiedene Möglichkeiten, dies zu tun, je nachdem, was Sie genau benötigen, aber eine Möglichkeit wäre, sowohl die Elemente A als auch B in Parent A zu platzieren.

    <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>
13
Matt Aft

UPDATE: Angeblich wurde zIndex zur react-native-Bibliothek hinzugefügt. Ich habe versucht, es ohne Erfolg zum Laufen zu bringen. Überprüfen Sie hier für Details zum Fix.

1
Mike S.

Sie können die gewünschte Lösung auch nicht mit CSS-z-index erreichen, da z-index nur relativ zum übergeordneten Element ist. Wenn Sie also die Eltern A und B mit den entsprechenden Kindern a und b haben, ist der Z-Index von b nur relativ zu den anderen Kindern von B und der Z-Index von a ist nur relativ zu den anderen Kindern von A.

Der z-Index von A und B ist relativ zueinander, wenn sie dasselbe übergeordnete Element verwenden, aber alle untergeordneten Elemente eines Elements werden auf dieser Ebene denselben relativen z-Index aufweisen.

0
1pocketaces1