Làm cách nào để kéo dài một hình ảnh tĩnh làm nền trong React Native?

Question

Tôi muốn sử dụng hình nền trong ứng dụng gốc phản ứng của mình, hình ảnh nhỏ hơn màn hình, vì vậy tôi phải kéo dài nó.

nhưng nó không hoạt động nếu hình ảnh là nạp từ bó tài sản

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> 

nó trông như thế này:

tuy nhiên, nó hoạt động tốt cho hình ảnh từ xa , thông qua source={{uri: 'background-image-uri'}}:

Answer 1

Từ vấn đề Github: Image {require} is broken in React Native for Resizing, bạn có thể thử <Image style={{width: null, height: null}}, hy vọng rằng facebook sẽ sớm khắc phục được sự cố đó.

Answer 2

Thẻ Hình ảnh thường không được coi là chế độ xem vùng chứa.

Có một wrapper hoàn toàn vị trí chứa (kéo dài/chứa) hình ảnh của bạn xuất hiện để làm việc tốt:

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

Bạn luôn có thể sử dụng các mô-đun Dimensions để có được chiều rộng của màn hình và thiết lập phong cách chiều rộng của hình ảnh của bạn để giá trị:

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

Nó cũng có vẻ lạ mà hình ảnh từ xa hoạt động tốt ... bạn có thể thử tải lên một hình ảnh tĩnh địa phương với uri SYNT rìu bằng cách sử dụng source={{uri: 'local_image_file_name' isStatic: true}}.