react-native – 在React Native中添加全屏背景图像的最佳方法是

发布时间：2020-12-15 06:54:10 所属栏目：百科来源：网络整理

导读：我想添加一个全屏的图像到视图，所以我写这个代码 return ( View style={styles.container} Image source={require('image!egg')} style={styles.backgroundImage} /View) 并将样式定义为 var styles = StyleSheet.create({container: { flex: 1,justifyCont

我想添加一个全屏的图像到视图，所以我写这个代码

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

任何想法？

您可以在< 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'
  }
});

我相信你可以摆脱<视图>包装你的形象，这将工作。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!