如何在react-native中重叠图像
如何在react-native中重叠图像
提问于 2015-10-30 19:20:54
我对在头像(个人资料图像)上创建自定义徽章很感兴趣，除了我似乎不能让图像重叠。我尝试使用'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);回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-02 13:44:59
我检查了您的代码并进行了一些更改，以获得您预期的输出。更新后的代码为：
'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
每当您想要覆盖任何react组件时，只需将该组件放在另一个组件的启动和关闭之间。例如：
如果您想要将一个图像重叠到另一个图像上，则使用如下标记
<Image source={require('image!firstimage')} style={..}>
<Image source={require('image!secondimage')} style={..}>
</Image>Stack Overflow用户
发布于 2019-01-22 22:26:47
嵌套Image组件不再起作用。你可以使用ImageBackground或者绝对定位。
正如doc所说，您可以通过检查ImageBackground https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js的源代码来编写自己的特定组件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33434797
复制相关文章
相似问题
腾讯云开发者
