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

问题描述

我想在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...

任何想法？

推荐答案

你可以使用 flex ：1 在< Image> 元素上设置样式以使其填满整个屏幕。然后，您可以使用其中一个图像调整大小模式让图像完全填充元素：

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.

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