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.
Wie zu verwenden zIndex in reagieren-native

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

13

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.
```
    <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>
```
Ich dachte das, aber ich habe zu halten, die Struktur so wie Sie ist..! Es gibt einen guten Grund, warum ich nicht wollen, fügen Sie Elemente B, die in der übergeordneten Ansicht. Ich vereinfachte meine Frage, aber es gibt viele Elternteil Ansichten mit vielen element Ein. Ich Schätze die Antwort, aber, danke.
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
3

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.

Das scheint mehr wie eine kluge, als eine reproduzierbare Lösung. Wer noch eine mehr technische Lösung?

InformationsquelleAutor SudoPlz
1

UPDATE: Angeblich zIndex wurde Hinzugefügt, um die react-native Bibliothek. Ich habe versucht, es zum laufen zu bringen ohne Erfolg. Überprüfen Sie hier für details des fix.

Es funktioniert wie vorgesehen. Nach dem spielen, um mit ihm ein bisschen, habe ich herausgefunden, wie man es richtig zu verwenden. Styling für mobile hat immer erschien scheinbar einfachen, aber in Wahrheit ist es nicht.

InformationsquelleAutor Mike S.
0

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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.