如何在 react-native 中重叠图像答案

【问题标题】：How to overlap images in react-native如何在 react-native 中重叠图像
【发布时间】：2015-10-30 11:20:53
【问题描述】：

我有兴趣在头像（个人资料图片）上创建自定义徽章，但我似乎无法让图片重叠。我尝试使用“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);

【问题讨论】：

Eric Anderson 您应该将回复标记为已接受的答案。 Raj 的答案在我看来是正确的。

标签： javascript react-native

【解决方案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);

查看上面代码sn-p的变化。输出截图链接：-https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

当你想要覆盖任何 React 组件时，只需将该组件放在另一个组件的启动和关闭之间。例如：-

如果您想将一张图片重叠在另一张图片上，请使用类似

的标签

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

【讨论】：

RN 文档中使用的示例支持此答案：facebook.github.io/react-native/docs/image.html#examples
知道将生成的父图像保存到文件的任何方法吗？用例是将“贴纸”添加到用户的图像，然后上传结果
自 2018 年 5 月 20 日起，不支持上述方法。
这在 2020 年不再起作用了。改用 css 绝对定位

【解决方案2】：

嵌套Image 组件不再起作用。您可以使用ImageBackground 代替或绝对定位。

正如文档所说，您可以通过检查ImageBackground 的源代码来编写自己的特定组件 https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

【讨论】：