Come allungare un'immagine statica come sfondo in React Native?

Question

Mi piacerebbe utilizzare un'immagine di sfondo nella mia app nativa reattiva, l'immagine è più piccola dello schermo, quindi devo allungarla.

ma non funziona se l'immagine è caricata dal fascio di asset

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> 

Sembra che questo:

tuttavia, tutto funziona bene per un'immagine remota , tramite source={{uri: 'background-image-uri'}}:

Answer 1

Da Github issue: Image {require} is broken in React Native for Resizing, si potrebbe provare <Image style={{width: null, height: null}}, spero che Facebook lo aggiusti presto.

Answer 2

Il tag immagine in genere non deve essere considerato come una vista contenitore.

Avere un involucro posizionato in modo assoluto che contiene l'immagine (allungato/contenuto) sembra funzionare bene:

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

Si può sempre utilizzare il modulo Dimensions per ottenere la larghezza dello schermo e impostare lo stile la larghezza della vostra immagine a tale valore:

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

sembra anche strano che un'immagine remota funziona bene ... si può provare a caricare un'immagine statica locale con il uri synt ascia usando source={{uri: 'local_image_file_name' isStatic: true}}.