Reagiere nativ - skaliere ein Bild, klammere es stattdessen

Question

Ich habe ein Bild für meine App, und es sollte den gesamten Bildschirm abdecken. Es ist ein bisschen breit und groß, also möchte ich es neu skalieren, um es an den Bildschirm anzupassen (egal, wie das Seitenverhältnis im Moment ist). Die Breite und Höhe, die ich anwende, skalieren das Bild jedoch nicht neu, sondern schneiden es ab.

Hier ist mein Code:

render() { 
    const width = Dimensions.get('window').width; 
    const height = Dimensions.get('window').height; 
    const imageWidth = { width: width }; 
    return (
     <View style={styles.container}> 
      <Image 
       style={styles.openingImage, imageWidth} 
       source={require('./src/images/opening.jpg')}> 
      </Image> 
     </View> 
    ); 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     backgroundColor: '#ff0000', 
    }, 

    openingImage: { 
     resizeMode: 'cover', 
    } 
}); 

Warum es cliping statt Ändern der Größe?

Answer 1

sowohl Breite und Höhe des Image Set zu undefined

imageStyle: { 
    width: undefined, 
    height: undefined, 
}