Wie dehnt man ein statisches Bild als Hintergrund in React Native?

Question

Ich möchte ein Hintergrundbild in meiner nativen App verwenden, das Bild ist kleiner als der Bildschirm, also muss ich es dehnen.

aber es funktioniert nicht, wenn das Bild aus dem Asset-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> 

es sieht wie folgt geladen ist:

aber es funktioniert gut für ein Remote-Bild , durch source={{uri: 'background-image-uri'}}:

Answer 1

Von Github Ausgabe: Image {require} is broken in React Native for Resizing, könnten Sie versuchen <Image style={{width: null, height: null}}, hoffe, dass Facebook würde es bald beheben.

Answer 2

Das Image-Tag sollte generell nicht als Containeransicht behandelt werden.

ein absolut positionierte Wrapper mit Ihrem (gestreckt/enthalten) Image scheint gut zu funktionieren:

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> 

Answer 3

Sie immer die Dimensions Modul nutzen, um die Breite des Bildschirms zu erhalten und Ihre Bildbreite Stil auf dieser Wert:

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

Es scheint auch seltsam, dass ein Remote-Bild funktioniert gut ... Sie können versuchen, ein lokales statisches Bild mit dem uri synt Laden bis Axt mit source={{uri: 'local_image_file_name' isStatic: true}}.