反応ネイティブの画像を重ねる方法

Question

私は画像を重ねることができないことを除いて、アバター（プロフィール画像）の上にカスタムバッジを作成することに興味があります。私は 'translateY'スタイルの変換を使用しようとしましたが、無視され、2つの画像が重なり合っていても、フレックスボックススタイルが横並びに配置されています。注：例ではViewsを使用していますが、Imageは同じように動作すると想像しています。

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