react-native中的image标签的resizeMode属性展示效果

最新推荐文章于 2024-10-08 10:42:41 发布

Sixology.

最新推荐文章于 2024-10-08 10:42:41 发布

阅读量1.4k

点赞数

分类专栏： react-native 文章标签： react native

本文链接：https://blog.csdn.net/qq_44685099/article/details/118566869

版权

6 篇文章

订阅专栏

本文详细介绍了React-Native中Image组件的resizeMode属性，包括cover、contain、stretch、repeat和center五种模式，并通过实例展示了它们在不同场景下的效果，帮助开发者更好地理解和应用这一属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。默认值为cover。

cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。
center: 居中不拉伸。
以上是官网文档对属性的概述，可能大家不能直观的看见效果，以下是几个属性的展示效果