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

小编典典

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

all

我想向视图添加全屏图像，所以我编写了这段代码

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 来访问像素密度，但没有关于屏幕尺寸…

阅读 125

2022-09-02

共1个答案

小编典典

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

<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>图像的包装，这将起作用。

2022-09-02