react-Native:iOS上的背景图片无法覆盖所有屏幕

问题描述 投票:0回答:1

尽管尝试了不同的样式选项,但背景图像并未在iOS设备上充满整个屏幕。而在Android设备上,它看起来很好,并且可以填充所有背景空间。

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

这里是iOS和android的两个模拟器的并排图片,iOS在右侧。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9hcnpGbC5wbmcifQ==” alt =“仿真器图片”>“ >>

我尝试使用styles属性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上的背景。

背景图片无法在iOS设备上填充整个屏幕,尽管尝试了不同的样式选项。而在Android设备上,它看起来很好,并且可以填充所有背景空间。我得到了相同的...

android ios react-native background-image image-resizing
1个回答
0
投票

解决方案是如下更改backgroundImage样式:

© www.soinside.com 2019 - 2024. All rights reserved.