首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >添加全屏背景图像的最好方法是什么

添加全屏背景图像的最好方法是什么
EN

Stack Overflow用户
提问于 2015-03-29 05:44:05
回答 18查看 266.1K关注 0票数 168

我想在视图中添加一个全屏图像,所以我编写了以下代码

代码语言:javascript
复制
return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

并将样式定义为

代码语言:javascript
复制
var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

但在这种情况下,我如何才能找到实际的iPhone屏幕尺寸呢?

我已经看到了一个API来访问像素密度,但没有关于屏幕大小的内容...

EN

回答 18

Stack Overflow用户

回答已采纳

发布于 2015-03-29 06:42:22

您可以在<Image>元素上使用flex: 1样式,让它充满整个屏幕。然后,您可以使用其中一种图像调整大小模式来使图像完全填充元素:

代码语言:javascript
复制
<Image source={require('image!egg')} style={styles.backgroundImage} />

风格:

代码语言:javascript
复制
import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

我很确定你可以摆脱包装你的图像的<View>,这将会起作用。

票数 125
EN

Stack Overflow用户

发布于 2018-03-07 07:21:02

2018年3月更新使用图像不推荐使用ImageBackground

代码语言:javascript
复制
  <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 >
票数 26
EN

Stack Overflow用户

发布于 2016-02-26 08:04:46

我使用react-native version = 0.19.0尝试了其中几个答案,但对android无济于事。

由于某种原因,我的样式表中的resizeMode不能正常工作?但是,当sytlesheet具有

代码语言:javascript
复制
backgroundImage: {
flex: 1,
width: null,
height: null,
}

并且,在图像标记中,我指定了resizeMode:

代码语言:javascript
复制
<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

它完美地工作了!如上所述,您也可以使用Image.resizeMode.cover或contain。

希望这能有所帮助!

票数 21
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29322973

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档