我有兴趣在头像(个人资料图片)上创建自定义徽章,但我似乎无法让图片重叠。我尝试使用“translateY”样式转换,但它被忽略了,并且两个图像仍然并排放置,弹性框样式,即使我希望它们重叠。请注意,我在示例中使用的是 View ,但我想图像的工作方式相同。
'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,
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>
关于javascript - 如何在 react-native 中重叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33434797/