Wie zu verwenden zIndex in reagieren-native
Habe ich möchte Folgendes erreichen:
Die folgenden Bilder sind was kann ich jetzt tun, aber das ist NICHT das, was ich will.
Beispiel-code habe ich jetzt:
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>
);
}
Man es in Worte, ich will
- Eltern Ein: unter alles.
- Element B:, um bei dem oben genannten Elternteil aber unten element A.
- Element Ein: über alles.
Beachten Sie, dass Eltern Ein und Element B beide absolut positioniert, und die beiden Elemente A und Elementen von B sein anklickbar...!
InformationsquelleAutor SudoPlz | 2017-01-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, es gibt verschiedene Möglichkeiten, dies zu tun, basierend auf, was Sie genau brauchen, aber eine Möglichkeit wäre, einfach beide Elemente A und B im inneren Übergeordnete A.
Ich glaube nicht, dass es möglich ist, es zu tun, wie Sie es wollen. Die Eltern Z-index wird zuerst ausgewertet, dann werden die Kinder im Vergleich zu anderen Kindern. Hier ist ein ähnlicher post, der geht mehr ins detail: stackoverflow.com/questions/7490146/...
Hmm, ich dachte so etwas wie halten Sie das Letzte Bild (3. Szenario), aber ich.e ignorieren, berührt der Eltern (die transparenten sowieso) und lassen Sie die event-pass zu element B auch wenn es unter Eltern. Und natürlich, wenn - element Ein gerendert wird, sollte es immer in den Genuss der touch-handler.
Tatsächlich, dass könnte funktionieren...pointerEvents 'box-none' auf das übergeordnete A. Dadurch wird Eine anklickbare Elemente, und Sie können klicken Sie sich durch die Eltern zu erreichen, element B dahinter.
fügen Sie mindestens verwenden Sie die richtige syntax... style={{ }}
InformationsquelleAutor Matt Aft
Ich endlich dies Problem gelöst durch die Schaffung eines zweiten Objekts, die imitiert B.
Mein schema sieht nun wie folgt aus:
Ich habe jetzt B1 (innerhalb Elternteil von A) und B2 außerhalb.
B1 und B2 sind direkt neben einander, also mit bloßem Auge sieht es aus als wenn es nur 1 Objekt.
InformationsquelleAutor SudoPlz
UPDATE: Angeblich
zIndex
wurde Hinzugefügt, um diereact-native
Bibliothek. Ich habe versucht, es zum laufen zu bringen ohne Erfolg. Überprüfen Sie hier für details des fix.InformationsquelleAutor Mike S.
Können Sie nicht erreichen die gewünschte Lösung mit der CSS-z-index, z-index ist nur relativ zum übergeordneten element. Also, wenn Sie die Eltern A und B mit den jeweiligen Kindern a und b, b ist z-index ist nur relativ zu anderen Kinder der B-und a-z-index ist nur relativ zu anderen Kindern von A.
Den z-index von A und B sind relativ zu einander, wenn Sie teilen die gleichen Eltern-element, aber alle Kinder eines teilen sich die gleiche relative z-index auf diesem Niveau.
InformationsquelleAutor 1pocketaces1