使图像适合屏幕

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>
   )
 }

Answer 2

尝试类似的事情：

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

使用resizeMode时，您必须设置宽度或高度，因为它不是样式道具

Answer 3

制作一个具有所需高度和宽度的容器，然后使用flex填充它。

<View style={styles.imageContainer}
   <Image 
      source={require(../../images/wireframe-car.jpg)}
      resizeMode={"cover"}
      style={styles.image}
   />  
</View>

const styles = {
imageContainer: {
width: '100%',
height: 200
}
image: {
flex: 1
}