添加全屏背景图像的最好方法是什么
添加全屏背景图像的最好方法是什么
提问于 2015-03-29 05:44:05
我想在视图中添加一个全屏图像，所以我编写了以下代码
return (
<View style={styles.container}>
<Image source={require('image!egg')} style={styles.backgroundImage}/>
</View>
)并将样式定义为
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column',
},
backgroundImage:{
width:320,
height:480,
}
...但在这种情况下，我如何才能找到实际的iPhone屏幕尺寸呢？
我已经看到了一个API来访问像素密度，但没有关于屏幕大小的内容...
回答 18
Stack Overflow用户
回答已采纳
发布于 2015-03-29 06:42:22
您可以在<Image>元素上使用flex: 1样式，让它充满整个屏幕。然后，您可以使用其中一种图像调整大小模式来使图像完全填充元素：
<Image source={require('image!egg')} style={styles.backgroundImage} />风格：
import React from 'react-native';
let { StyleSheet } = React;
let styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
}
});我很确定你可以摆脱包装你的图像的<View>，这将会起作用。
Stack Overflow用户
发布于 2018-03-07 07:21:02
2018年3月更新使用图像不推荐使用ImageBackground
<ImageBackground
source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
style={{ flex: 1,
width: null,
height: null,
}}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Your Contents</Text>
</View>
</ImageBackground >Stack Overflow用户
发布于 2016-02-26 08:04:46
我使用react-native version = 0.19.0尝试了其中几个答案，但对android无济于事。
由于某种原因，我的样式表中的resizeMode不能正常工作？但是，当sytlesheet具有
backgroundImage: {
flex: 1,
width: null,
height: null,
}并且，在图像标记中，我指定了resizeMode：
<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>它完美地工作了！如上所述，您也可以使用Image.resizeMode.cover或contain。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29322973
复制相关文章
相似问题
腾讯云开发者
