我有兴趣在头像(个人资料图片)上创建自定义徽章,除了我似乎无法让图像重叠.我尝试使用’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>
