React Native image：为啥父视图在设置为“包含”时与“覆盖”保持相同的高度？

Posted 2023-03-07

【中文标题】React Native image：为啥父视图在设置为“包含”时与“覆盖”保持相同的高度？

【英文标题】：React Native image: why does parent view stay same height as 'cover' when set to 'contain'?React Native image：为什么父视图在设置为“包含”时与“覆盖”保持相同的高度？

【发布时间】：2022-01-10 02:40:09

【问题描述】：

我的 React Native 应用中有以下图片

我想把这张图片放在一个父元素里面，上面或下面没有空格，我希望这张图片不会超出屏幕的左侧或右侧

当我有这样的代码时

<View style=
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
>
    <Image
        style=
            width: '100%'
        
        source=require('@images/swoosh-02.png')
    />
</View>

我明白了，因为 resizeMode 的默认值是 cover

当我把它改成这个时（添加resizeMode='contain'）

<View style=
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
>
    <Image
        style=
            width: '100%'
        
        resizeMode='contain'
        source=require('@images/swoosh-02.png')
    />
</View>

图像已成功水平包含，但父元素的高度与resizeMode 为cover 时的高度相同。

我怎样才能让父元素垂直收缩以仅包含图像而没有额外的顶部/​​底部填充？

【参考方案1】：

contain 和 cover 的区别是：

resizeMode='contain' = 均匀缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）都等于或小于视图的相应尺寸（减去填充）。

resizeMode='cover' = 均匀缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）都等于或大于视图的相应尺寸（减去填充）。

也许你应该尝试在你的视图中应用 height。

阅读this article，应该会对你有所帮助。