react-Native：iOS上的背景图像无法覆盖整个屏幕

Posted 2023-03-15

【中文标题】react-Native：iOS上的背景图像无法覆盖整个屏幕

【英文标题】：react-Native: background image on iOS has cannot cover all the screen

【发布时间】：2019-11-03 10:00:08

【问题描述】：

尽管尝试了不同的样式选项，但背景图像并未填满 ios 设备上的整个屏幕。而在 android 设备上，它看起来不错，并填满了所有背景空间。

我在 iPhone6 设备上遇到了同样的问题，在 iPhone 11 模拟器上也是如此。左右似乎有背景图像没有覆盖的白色边缘，但这不会发生在 android 设备上。

这是iOS和android模拟器并排的图片，iOS在右边。

我尝试使用样式属性 resizeMode ，其值包括 'cover'、'stretch'、'contain' 等，但它们似乎都没有什么不同。这是代码：

import React from 'react';
import  Text, View, Platform, ImageBackground  from 'react-native';
import  Button  from 'native-base'

var myBackground = require('./assets/icons/landing.jpg')

export default function App() 
  return (
    <View style=styles.container>
      <ImageBackground
        source=myBackground
        style=styles.imageStyle
        >
        <View style=styles.viewStyle>
          <Text
            style=styles.titleStyle
          >Welcome to pokeSearch</Text>
          <Button
            block=true
            style=styles.buttonStyle
            onPress=() =>  
          >
            <Text style=styles.buttonText>Start Searching</Text>
          </Button>
        </View>
      </ImageBackground>


    </View>
  );


const styles = 
  container: 
    flex: 1,
    // marginTop: Platform.OS === "android" ? 20 : 0,
    justifyContent: 'center',
    alignItems: 'center'

  ,
  buttonOuterLayout: 
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',


  ,
  buttonLayout: 
    // marginTop: 10,
    // paddingRight: 10,
    // paddingLeft: 10

  ,
  viewStyle: 
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  ,
  titleStyle: 
    fontSize: 30,
    color: 'blue',
    alignItems: 'center'

  ,
  imageStyle: 
    // flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'

    // justifyContent: 'flex-end',
    // alignItems: 'center'
  ,

  buttonStyle: 
    margin: 10

  ,
  buttonText: 
    color: 'white'
  

我希望背景图像像在 android 上一样覆盖 iOS 上的背景。

【问题讨论】：

试用：width: '100%', height: '100%', flex: 1, resizeMode: 'cover'?

刚刚用 'contain' 试过了，它奏效了！不确定什么是最好的使用、包含或覆盖..

完美 :) 我从这里获取了我的解决方案：***.com/a/50233429/2910520，所有功劳归他所有。尝试使用不同的设备并检查会发生什么

【参考方案1】：

解决方法是改变 backgroundImage 样式如下：

imageStyle: 
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover'

所有功劳归于 matPag 和 https://***.com/a/50233429/2910520