सूची दृश्य के शीर्ष पर ओवरले दृश्य?

Question

मेरे पास एक पूर्ण स्क्रीन सूची दृश्य वाला एक ऐप है। मैं शीर्ष पर एक नया दृश्य पदानुक्रम जोड़ना चाहता हूं (यह आंशिक रूप से सूची दृश्य को अवरुद्ध करेगा और ऊपर तैर जाएगा)। Tweetbot की तरह सॉर्ट करें, यह एक ड्रॉप डाउन संदेश बॉक्स के रूप में कार्य करेगा जो सूची दृश्य पर परतें।

मैं इसे प्राप्त करने के लिए सही रेंडर कोड नहीं समझ सकता। मैं सूची दृश्य और पूर्ण परत दोनों पर परत को पूर्ण करने में सक्षम था, लेकिन सूची दृश्य को पूर्ण स्क्रीन (flex: 1) में विस्तारित करने का तरीका नहीं समझ सकता और शीर्ष पर फ़्लोटिंग बॉक्स है।

Answer 1

तो मुझे लगता है कि मैंने इस पोस्ट के लिए एक साधारण उदाहरण लिखने के बाद इसे समझ लिया। निम्न कार्य दूसरे पर एक दृश्य फ्लोट करने के लिए:

'use strict'; 

var React = require('react-native'); 

var { 
    AppRegistry, 
    StyleSheet, 
    View, 
} = React; 

var styles = StyleSheet.create({ 
    fullScreen: { 
     flex:1, 
     backgroundColor: 'red', 
    }, 
    floatView: { 
     position: 'absolute', 
     width: 100, 
     height: 100, 
     top: 200, 
     left: 40, 
     backgroundColor: 'green', 
    }, 
    parent: { 
     flex: 1, 
    } 
}); 


var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}/>{/* WORKS FOR REGULAR VIEW */} 
      </View> 
     ); 
    }, 


}); 

module.exports = Example; 

मुझे क्या करना कोशिश कर रहा था एक और कस्टम वर्ग नाव था, तो मैं कोड प्रस्तुत करना प्रतिस्थापित w/निम्नलिखित:

var Example = React.createClass({ 
    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <DropDown style={styles.floatView}/>{/* DOES NOT WORK FOR CUSTOM VIEW */} 
      </View> 
     ); 
    }, 
}); 

नहीं था कि काम। वैसे, मेरा "ड्रॉपडाउन" बस कुछ पाठ के साथ एक दृश्य देता है। लेकिन निम्नलिखित कार्य करते हैं:

var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}>{/* WORKS FOR CUSTOM VIEW */} 
        <DropDown /> 
       </View> 
      </View> 
     ); 
    }, 
});