Come sovrapporre le immagini in nativa reattiva

Question

Sono interessato a creare un badge personalizzato su un avatar (immagine del profilo), tranne che non riesco a far sì che le immagini si sovrappongano. Ho provato a utilizzare una trasformazione in stile "translateY" ma è ignorata e le due immagini sono ancora affiancate, in stile flex box, anche se voglio che si sovrappongano. Nota, sto usando Views nell'esempio, ma immagino che le immagini funzionino allo stesso modo.

'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

Esaminare il codice e apportare alcune modifiche per ottenere l'output previsto. Il codice aggiornato è: -

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

vedere il cambiamento nel frammento di codice di cui sopra. Link schermata di uscita: - https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

Ogni volta che si desidera sostituire un componente di reazione, è sufficiente mettere tale componente tra l'inizio e la chiusura di un altro componente. Ad esempio: -

Se si vuole sovrapporre un'immagine su un altro quindi utilizzare i tag come

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