Jak nakładać obrazy w trybie reakcji natywnej

Question

Jestem zainteresowany tworzeniem niestandardowej plakietki na szczycie awatara (obrazu profilu), z tą różnicą, że nie mogę nakładać obrazów na siebie. Próbowałem użyć transformacji stylu "translateY", ale jest ona ignorowana, a dwa obrazy są nadal umieszczone obok siebie, w stylu flex box, chociaż chcę, żeby się nakładały. Zauważ, że używam widoków w przykładzie, ale wyobrażam sobie, że obrazy działają w ten sam sposób.

'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

Sprawdzam kod i wprowadzam pewne zmiany, aby uzyskać oczekiwany wynik. Zaktualizowana kod jest: -

'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);                                        

Zobacz zmiany w kodzie powyżej fragmencie. Wyjściowy zrzut ekranu link: - https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

Ilekroć chcesz przesłonić dowolny komponent reagowania, po prostu umieść ten komponent pomiędzy uruchomieniem i zamknięciem innego komponentu. Na przykład: -

Jeśli chcesz pokrywać jedno zdjęcie na kolejne następnie używać znaczników jak

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