javascript – 如何在react-native中重叠图像

我有兴趣在头像(个人资料图片)上创建自定义徽章,除了我似乎无法让图像重叠.我尝试使用’translateY’样式转换,但它被忽略,两个图像仍然并排放置,flex盒式,即使我希望它们重叠.注意,我在示例中使用了Views,但我想象 Images的工作方式相同.

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

解决方法

我检查您的代码并进行一些更改以获得预期的输出.
更新的代码是： –

'use strict';

var React = require('react-native');                                                                                                                                                                                 
var {                                                                                                                                                                                                                
  AppRegistry,} = 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',badge: {                                                                                                                                                                                                         
     backgroundColor: 'red',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>