प्रतिक्रिया-मूल

Question

में छवियों को ओवरलैप करने के लिए कैसे करें मुझे अवतार (प्रोफ़ाइल छवि) के शीर्ष पर एक कस्टम बैज बनाने में दिलचस्पी है, सिवाय इसके कि मुझे छवियों को ओवरलैप करने के लिए प्रतीत नहीं होता है। मैंने 'translateY' शैली परिवर्तन का उपयोग करने की कोशिश की लेकिन इसे अनदेखा कर दिया गया है और दो छवियों को अभी भी तरफ से रखा गया है, फ्लेक्स बॉक्स शैली, भले ही मैं उन्हें ओवरलैप करना चाहता हूं। नोट, मैं उदाहरण में दृश्यों का उपयोग कर रहा हूं, लेकिन मुझे लगता है कि छवियां एक ही तरीके से काम करती हैं।

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <View style={styles.avatar} /> 
     <View style={styles.badge} /> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    }, 
    avatar: { 
    backgroundColor: 'black', 
    width: 60, 
    height: 60, 
    }, 
    badge: { 
    backgroundColor: 'red', 
    width: 20, 
    height: 20, 
    translateY: -60, 
    }, 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Answer 1

मैं आपके कोड की समीक्षा करता हूं और आपके अपेक्षित आउटपुट प्राप्त करने के लिए कुछ बदलाव करता हूं। अद्यतन कोड है: -

'use strict'; 

var React = require('react-native');                                             
var {                                                     
    AppRegistry,                                                  
    StyleSheet,                                                  
    Text,                                                    
    View,                                                    
} = React;                                                   

var SampleApp = React.createClass({                                             
    render: function() {                                                
    return (                                                  
     <View style={styles.container}>                                          
     <View style={styles.avatar}>                                           
     <View style={styles.badge} />                                           
     </View>                                                
     </View>                                                
    );                                                   
    }                                                     
});                                                     

var styles = StyleSheet.create({                                              
    container: {                                                  
    },                                                    
    avatar: {                                                   
    backgroundColor: 'black',                                              
    width: 60,                                                 
    height: 60,                                                 
    },                                                    
    badge: {                                                   
    backgroundColor: 'red',                                              
    width: 20,                                                 
    height: 20,                                                 
    left: 20,                                                  
    top: 20,                                                  
    },                                                    
});                                                     

AppRegistry.registerComponent('SampleApp',() => SampleApp);                                        

ऊपर कोड स्निपेट में परिवर्तन देखें। आउटपुट स्क्रीनशॉट लिंक: - https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

जब भी आप किसी भी प्रतिक्रिया घटक को ओवरराइड करना चाहते हैं तो बस उस घटक को किसी अन्य घटक के प्रारंभ और बंद के बीच में रखें। उदाहरण के लिए: -

आप

<Image source={require('image!firstimage')} style={..}> 
     <Image source={require('image!secondimage')} style={..}> 
    </Image>