Statik görüntüyü arka planda Reaktif Yerleşik olarak nasıl uzatılır?

Question

Arka plan görüntüsü kullanmak istiyorum, yerel uygulama uygulamasında görüntü ekrandan daha küçük, bu yüzden onu germek zorundayım.

ama resim öğesi paket yüklenen ise çalışmıyor

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> 

o şuna benzer:

ancak uzak bir görüntü için çalışıyor source={{uri: 'background-image-uri'}} aracılığıyla:

Answer 1

Github sayısından: <Image style={{width: null, height: null}}, facebook yakında düzeltmek umuyoruz, Image {require} is broken in React Native for Resizing denebilir.

Answer 2

Görüntü etiketi genellikle kapsayıcı görünüm olarak değerlendirilmemelidir.

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

Hep ekranın genişliğini almak için Dimensions modülü kullanmak ve resminizin genişliğini stilini ayarlayabilirsiniz: En (gerilmiş/alan) görüntüyü içeren kesinlikle konumlandırılmış sarıcı olması

iyi çalıştığı görülür bu değer:

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

Ayrıca uzak bir görüntü size uri synt ile yerel bir statik bir resim kadar yükleme deneyebilirsiniz ... çalışıyor garip görünüyor source={{uri: 'local_image_file_name' isStatic: true}} kullanarak balta.