Reaction-Native: фоновое изображение на iOS не может охватить весь экран

Question

Фоновое изображение не заполняет весь экран на устройствах iOS, несмотря на попытки разных вариантов стилей. в то время как на устройствах Android это выглядит хорошо и заполняет все фоновое пространство.

У меня возникла такая же проблема на устройстве iPhone6, а также на эмуляторе iPhone 11. Слева и справа появляются белые края, которые фоновое изображение не покрывает, но на устройствах с Android этого не происходит.

Вот изображение обоих эмуляторов iOS и Android рядом, iOS справа.

Я попытался использовать свойство styles resizeMode,со значениями, такими как 'cover', 'stretch', 'содержать' и т. д., но ни одно из них, казалось, не имеет значения ... вот код:

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'
  }
}

Я хочу, чтобы фоновое изображение покрывалофон на iOS как на андроиде.

Answer 1

решение состоит в том, чтобы изменить стиль backgroundImage следующим образом:

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

все кредиты идут в matPag и https://stackoverflow.com/a/50233429/2910520