使图像适合屏幕

Question

我试图简单地显示一个图像并让它自动缩放以适应屏幕。根据文档resizeMode: 'contain'应该做我想做的。但是，我尝试过的一切似乎都不起作用。我试过手动设置宽度和高度。我试过将它们设置为undefined. 我试过使用，Dimensions.get("window").height但无论图像没有调整大小，它都会超出屏幕的底部和右侧。

这是原始图像：

这是它的呈现方式：

这是我的代码：

<View>
   <Image source={require('../../images/wireframe-car.jpg')} style={{resizeMode: 'contain'}} />
</View>

我错过了什么？

提前致谢

Answer 1

我认为你可以通过添加更多maxWidth和maxHeight

 const {width, height} = Dimensions.get("window")
 render() {
   return(
    <View>
      <Image source={require('../../images/wireframe-car.jpg')}
        resizeMode='contain'
        style={{
          maxHeight: height,
          maxWidth: width
          }} />
    </View>
   )
 }