[英]How to overlap images in 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,
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>
嵌套Image
组件不再起作用。 您可以使用的是ImageBackground
或绝对定位。
正如doc所说,你可以通过检查ImageBackground
的源代码来编写你自己的特定组件https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.