ios 如何在 React Native 中将图像放置在其他图像之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33761012/
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 place an Image on top of other Image in React Native?
提问by Федор Усаков
I placed an Image as a root node in order to make it a background for my View. But it appears that all others image become invisible...
Is it any way to place an image on top of the background using built-in components, without any plugins?
In the following code sample landing-backgroundis used as a background, my logoimage is visible, but only if background is removed.Textis showing on top of the background without any concerns...
我将一个 Image 作为根节点放置，以使其成为我的 View 的背景。但似乎所有其他图像都变得不可见......有没有办法使用内置组件将图像放置在背景之上，而无需任何插件？
在下面的代码示例landing-background中用作背景，我的logo图像是可见的，但前提是背景被删除。Text毫无顾虑地显示在背景之上......
<View style={styles.container}>
<Image source = {require('./img/landing-background.jpg')}
resizeMode = 'cover' style = {styles.backdrop}>
<View style = {styles.overlay}>
<Text style = {styles.headline}>It should appear in front of the Background Image</Text>
<Image style = {styles.logo} source = {require('./img/logo.png')} />
</View>
</Image>
</View>
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
overlay: {
opacity: 0.5,
backgroundColor: '#000000'
},
logo: {
backgroundColor: 'rgba(0,0,0,0)',
width: 160,
height: 52
},
backdrop: {
flex:1,
flexDirection: 'column'
},
headline: {
fontSize: 18,
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0)',
color: 'white'
}
});
回答by Chris Schmitz
Rather than wrapping your content in the <Image>, I think you would be better off wrapping that in an absolutely positioned element and having that stretch to cover the screen.
与其将您的内容<Image>包裹在absolute.
<View style={styles.container}>
<View style = {styles.backgroundContainer}>
<Image source = {require('./img/landing-background.jpg')} resizeMode = 'cover' style = {styles.backdrop} />
</View>
<View style = {styles.overlay}>
<Text style = {styles.headline}>It should appear in front of the Background Image</Text>
<Image style = {styles.logo} source = {require('./img/logo.png')} />
</View>
</View>
var styles = StyleSheet.create({
backgroundContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
container: {
flex: 1,
alignItems: 'center',
},
overlay: {
opacity: 0.5,
backgroundColor: '#000000'
},
logo: {
backgroundColor: 'rgba(0,0,0,0)',
width: 160,
height: 52
},
backdrop: {
flex:1,
flexDirection: 'column'
},
headline: {
fontSize: 18,
textAlign: 'center',
backgroundColor: 'black',
color: 'white'
}
});
回答by amirreza karimi
I have the same issue, I used an <ImageBackground>
我有同样的问题，我使用了 <ImageBackground>
<View style={{height: 55,width: 55,justifyContent: 'center',alignItems: 'center'}}>
<ImageBackground source={{uri:this.state.image1}} style={{height: 50,width: 50}}>
<View style={{flex: 1,justifyContent: 'flex-end',alignItems: 'flex-start'}}> //here you can change position of image with justifyContent and alignItems
<Image
source={ {uri:this.state.image2}}
style={{width: 20 , height: 20 ,alignItems: 'center',justifyContent: 'center',borderWidth: 1,borderColor: '#fff',borderRadius: 30}} />
</View>
</ImageBackground>
</View>
回答by Abhirup Mukherjee
<ImageBackground style={{width:100, height:100, jsutifyContent:'center}}>
<Image/> //childimage
</ImageBackground
This would help you add a background image with an overlay of the child image, and worked perfectly fine for me.
这将帮助您添加带有子图像叠加层的背景图像，并且对我来说效果很好。
