Как растянуть статическое изображение в качестве фона в React Native?

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

но это не работает, если изображение загружено из пакета ресурсов

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    resizeMode: 'stretch',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

<Image source={require('image!background')} style={styles.bgImage}>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</Image>

он выглядит так:

однако он отлично работает для удаленного изображения, через source={{uri: 'background-image-uri'}}:

Ответы

Ответ 1

Из проблемы Github: Изображение {require} нарушено в React Native для изменения размера, вы можете попробовать <Image style={{width: null, height: null}}, надеяться, что facebook скоро исправит его.

Ответ 2

Тег изображения обычно не должен рассматриваться как вид контейнера.

Наличие абсолютно позиционированной обертки, содержащей ваше (растянутое/содержащее) изображение, выглядит хорошо:

var styles = StyleSheet.create({
    bgImageWrapper: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0
    },
    bgImage: {
        flex: 1,
        resizeMode: "stretch"
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    }
});



<View style={{ flex: 1 }}>
  <View style={styles.bgImageWrapper}>
    <Image source={require('image!background')} style={styles.bgImage} />
  </View>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</View>

Ответ 3

Вы всегда можете использовать модуль Dimensions, чтобы получить ширину экрана и задать стиль ширины изображения для этого значения:

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

Также кажется странным, что удаленное изображение отлично работает... вы можете попробовать загрузить локальное статическое изображение с помощью синтаксиса uri с помощью source={{uri: 'local_image_file_name' isStatic: true}}.