Wie zIndex verwenden, in reagieren-native

Question

Ich möchte ich folgendes erreichen:

Die folgenden Bilder sind das, was ich jetzt tun kann, aber das ist nicht das, was ich will.

Beispielcode Ich habe 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> 
    ); 
} 

es in Worte zu fassen, ich will

• Elternteil A: unten alles sein.
• Element B: bei der obigen Mutter A zu sein, aber unterhalb Element A.
• Element A: über alles.

Beachten Sie, dass Elternteil A und Element B haben beide absolut positioniert sein, und beide Elemente A und B Elemente haben klickbare sein ...!

Answer 1

ich das endlich gelöst durch die Schaffung ein zweites Objekt, das B. imitiert

Mein Schema sieht nun wie folgt aus:

ich jetzt B1 haben (innerhalb pare nt von A) und B2 außerhalb davon.

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

Answer 2

Ich glaube, es gibt verschiedene Wege, dies zu tun auf, was Sie genau brauchen, aber ein Weg wäre, nur die beiden Elemente A und B innerhalb Elternteil A. setzen

<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>