添加全屏背景图像的最佳方法是什么 [英] What's the best way to add a full screen background image

问题描述

我想在View中添加全屏图像，所以我编写这段代码

I wanted to add a full-screen image to the View so I write this code

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的实际屏幕尺寸?

but in this way how am I supposed to find the actual iPhone screen size?

我已经看到了用于访问像素密度的API，但是与屏幕尺寸无关...

I've seen an API to access the Pixel Density but nothing about the screen size...

推荐答案

您可以在< Image> 元素上使用 flex:1 样式以使其填充整个屏幕.然后，您可以使用图像调整大小"模式之一来使图像完全填充元素:

You can use flex: 1 styling on an <Image> element to have it fill the whole screen. You can then use one of the Image resize modes to have the image completely fill the element:

<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> ，这将起作用.

I'm pretty sure you can get rid of the <View> wrapping your image and this will work.

这篇关于添加全屏背景图像的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！