Comment étirer une image statique comme arrière-plan de Réagir Natif?

Je voudrais utiliser une image de fond dans mon réagir application native,
l'image est plus petite que l'écran, j'ai donc pour l'étirer.

mais il ne fonctionne pas si l'image est chargés de l'actif bundle

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>

il ressemble à ceci:

Comment étirer une image statique comme arrière-plan de Réagir Natif?

cependant, il fonctionne très bien pour une image distante, par le biais de source={{uri: 'background-image-uri'}}:

Comment étirer une image statique comme arrière-plan de Réagir Natif?

Essayez resizeMode: 'cover' ? voir: http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native

OriginalL'auteur xinthink | 2015-05-16

  1. 22

    À partir de Github question: Image {exiger} est cassé à Réagir Natif pour le Redimensionnement, vous pouvez essayer de <Image style={{width: null, height: null}}, espérons que facebook serait-il fixer bientôt.

    réglage de la largeur et de la hauteur a fonctionné pour moi...contexte : { flex:1, largeur: null, hauteur: null, resizeMode:'stretch' },

    OriginalL'auteur Dickeylth

  2. 9

    La balise d'Image ne doit généralement pas être traité comme un conteneur de vue.

    Avoir une position absolue emballage contenant votre (étirée/contenus) de l'image semble bien fonctionner:

    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>
    Malheureusement, il ne fonctionne pas pour moi. Et pourquoi Image ne doit pas être considérée comme un conteneur, tandis que les officielles, le document suggère Image de Fond par l'Imbrication?
    Vous pouvez maintenant utiliser ImageBackground comme un conteneur de vue: medium.com/@hklucher/...

    OriginalL'auteur Jack

  3. 2

    Vous pouvez toujours utiliser le Dimensions module pour obtenir la largeur de l'écran et réglez votre largeur de l'image à celui de la valeur:

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

    Il semble étrange qu'une image distante fonctionne très bien...vous pouvez essayer de chargement d'un local d'une image statique avec le uri syntaxe en utilisant source={{uri: 'local_image_file_name' isStatic: true}}.

    Merci @dave, je pense que le document officiel l'explique, require('image!x') résultats dans un objet avec une largeur fixe & hauteur (la taille de l'image): {"__packager_asset":true,"isStatic":true,"path":"...","uri":"logo","width":591,"height":573}. Je vais essayer de uri forme et vous permettent de connaître le résultat, thx!

    OriginalL'auteur Dave Sibiski