प्रतिक्रियात्मक मूल में पृष्ठभूमि के रूप में एक स्थिर छवि को कैसे फैलाएं?

Question

मैं अपने प्रतिक्रिया देशी ऐप में एक पृष्ठभूमि छवि का उपयोग करना चाहता हूं, छवि स्क्रीन से छोटी है, इसलिए मुझे इसे खींचना है। तथापि

, यह एक दूरस्थ छवि के लिए ठीक काम करता है:

लेकिन अगर छवि संपत्ति बंडल से भरी हुई है यह काम नहीं करता

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'}} के माध्यम से:

Answer 1

गीथूब मुद्दे से: Image {require} is broken in React Native for Resizing, आप <Image style={{width: null, height: null}} को आजमा सकते हैं, उम्मीद है कि फेसबुक जल्द ही इसे ठीक करेगा।

Answer 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> 

Answer 3

तुम हमेशा स्क्रीन की चौड़ाई प्राप्त करने के लिए Dimensions मॉड्यूल का उपयोग करने के लिए और अपनी छवि की चौड़ाई शैली सेट कर सकते हैं:

एक बिल्कुल तैनात आवरण अपने (फैला/निहित) छवि युक्त होने में अच्छी तरह से काम करने के लिए प्रकट होता है कि मूल्य:

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

यह भी अजीब लगता है कि एक रिमोट छवि ठीक काम करता है ... आप uri SYNT के साथ एक स्थानीय स्थिर छवि को लोड कोशिश कर सकते हैं source={{uri: 'local_image_file_name' isStatic: true}} का उपयोग कर कुल्हाड़ी।