反应原生 - 缩放图像而不是剪辑它

Question

我的应用有一张图片，它应该覆盖整个屏幕。它有点宽和高，所以我想重新调整它以适应屏幕（暂时不要介意纵横比）。但是，我应用的宽度和高度不会重新缩放图像，而是剪切它。

这是我的代码：

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',
    }
});

为什么是剪裁而不是调整大小？

Answer 1

将Image的宽度和高度都设置为undefined

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