Jak rozciągnąć obraz statyczny jako tło w React Native?

Question

Chciałbym użyć obrazu tła w mojej macierzystej aplikacji reagowania, obraz jest mniejszy niż ekran, więc muszę go rozciągnąć.

ale to nie działa, jeśli obraz jest ładowane z wiązki aktywów

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> 

wygląda to tak:

jednak to działa dobrze na zdalnym obrazie , przez source={{uri: 'background-image-uri'}}:

Answer 1

Od wydania Github: Image {require} is broken in React Native for Resizing, możesz spróbować <Image style={{width: null, height: null}}, mam nadzieję, że Facebook wkrótce to naprawi.

Answer 2

Znacznik obrazu zazwyczaj nie powinien być traktowany jako widok kontenera.

Mając pozycjonowany bezwzględnie opakowania zawierającego swoją (rozciągnięta/zawartego) obraz wydaje się działać dobrze:

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

Zawsze można użyć modułu Dimensions uzyskać szerokość ekranu i ustawić szerokość stylu twojego obrazka do że wartość:

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

wydaje się też dziwne, że zdalny obraz działa dobrze ... można spróbować ładuje się lokalny statyczny obraz z uri Synt topór przy użyciu source={{uri: 'local_image_file_name' isStatic: true}}.