में प्रतिक्रिया देशी

Question

मैं निम्नलिखित हासिल करना चाहते गए 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> 
    ); 
} 

शब्दों में कहें, मैं चाहता हूँ

• जनक एक: सब कुछ नीचे होने के लिए।
• तत्व बी:
• तत्व एक ऊपर माता-पिता एक पर लेकिन तत्व ए नीचे हो: सब कुछ ऊपर।

ध्यान दें कि जनक एक और तत्व बी दोनों बिल्कुल तैनात है, और दोनों तत्वों एक और तत्व बी क्लिक करने योग्य होना जरूरी होने के लिए ...!

Answer 1

मैं अंत में बनाने के द्वारा इस हल के अंदर तत्वों ए और बी दोनों डाल करने के लिए किया जाएगा एक दूसरे उद्देश्य यह है कि बी नकल

मेरे स्कीमा अब इस तरह दिखता है: (

मैं अब बी 1 है पारे के भीतर एन के एनटी) और बी 2 इसके बाहर।

बी 1 और बी 2 एक दूसरे के बगल में हैं, इसलिए नग्न आंखों में ऐसा लगता है कि यह केवल 1 वस्तु है।

Answer 2

मेरा मानना ​​है कि वहाँ क्या आप वास्तव में जरूरत के आधार पर यह करने के लिए अलग अलग तरीके हैं, लेकिन एक तरह से सिर्फ जनक ए

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