प्रतिक्रियात्मक मूल में, मैं पीछे के दृश्य की सीमा के बाहर झूठ बोलने के साथ, किसी अन्य दृश्य के शीर्ष पर एक दृश्य कैसे लगा सकता हूं?

Question

मैं प्रतिक्रिया मूल के साथ नीचे दिए गए अनुसार एक लेआउट बनाने की कोशिश कर रहा हूं।

मैं एक करने के लिए बी रिश्तेदार की स्थिति को कैसे निर्दिष्ट करूँ?

आईओएस इंटरफेस बिल्डर और ऑटोकॉन्स्ट्रेन के साथ, यह बहुत स्पष्ट रूप से किया जा सकता है और एक हवा है। यह इतना स्पष्ट नहीं है कि कोई प्रतिक्रियात्मक मूल के साथ इसे कैसे प्राप्त कर सकता है।

Answer 1

"चल" दृश्य

position: 'absolute' 

आप भी स्थिति

के लिए एक शीर्ष और बाएं मूल्य जोड़ने की आवश्यकता हो सकती करने के लिए निम्न जोड़ने के इस उदाहरण देखें: https://rnplay.org/apps/OjzcxQ/edit

Answer 2

आप zIndex उपयोग कर सकते हैं दूसरे के शीर्ष पर एक दृश्य रखने के लिए। यह सीएसएस जेड-इंडेक्स प्रॉपर्टी की तरह काम करता है - बड़े zIndex वाले घटक शीर्ष पर प्रस्तुत होंगे।

आप उल्लेख कर सकते हैं: Layout Props

स्निपेट:

<ScrollView> 
      <StatusBar backgroundColor="black" barStyle="light-content" /> 
      <Image style={styles.headerImage} source={{ uri: "http://www.artwallpaperhi.com/thumbnails/detail/20140814/cityscapes%20buildings%20hong%20kong_www.artwallpaperhi.com_18.jpg" }}> 
      <View style={styles.back}> 
       <TouchableOpacity> 
       <Icons name="arrow-back" size={25} color="#ffffff" /> 
       </TouchableOpacity> 
      </View> 
      <Image style={styles.subHeaderImage} borderRadius={55} source={{ uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Albert_Einstein_1947.jpg/220px-Albert_Einstein_1947.jpg" }} /> 
      </Image> 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: "white" 
    }, 
    headerImage: { 
     height: height(150), 
     width: deviceWidth 
    }, 
    subHeaderImage: { 
     height: 110, 
     width: 110, 
     marginTop: height(35), 
     marginLeft: width(25), 
     borderColor: "white", 
     borderWidth: 2, 
     zIndex: 5 
    },