javascript 如何在反应原生中重叠图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33434797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlap images in react-native
提问by Eric Anderson
I'm interested in creating a custom badge on top of an avatar (profile image), except I can't seem to get images to overlap. I tried using a 'translateY' style transform but it is ignored and the two images are still placed side by side, flex box style, even though I want them to overlap. Note, I'm using Views in the example, but I imagine Images work the same way.
我有兴趣在头像（个人资料图片）之上创建自定义徽章，但我似乎无法让图片重叠。我尝试使用“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);
回答by Raj Rajole
I review your code and make some changes to get your expected output. The updated code is:-
我查看了您的代码并进行了一些更改以获得您预期的输出。更新后的代码是：-
'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);
See the change in above code snippet. Output screenshot link:- https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing
请参阅上述代码片段中的更改。输出截图链接：- https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing
Whenever you want to override any react component simply put that component in between start and close of another component. For example:-
每当您想覆盖任何反应组件时，只需将该组件放在另一个组件的开始和关闭之间即可。例如：-
If you want to overlap one image on another then use tags like
如果您想将一个图像重叠在另一个图像上，请使用类似的标签
<Image source={require('image!firstimage')} style={..}>
<Image source={require('image!secondimage')} style={..}>
</Image>
回答by j0nd0n7
Nesting Imagecomponents doesn't work anymore. What you could use is ImageBackgroundinstead or absolute positioning.
嵌套Image组件不再起作用。您可以使用的是ImageBackground替代或绝对定位。
As doc says you can code your own specific component by checking the source code of ImageBackgroundhttps://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
正如文档所说，您可以通过检查https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js的源代码来编写自己的特定组件ImageBackground
