react-native - React Native Image resizeMode：“中心”和“包含”之间的区别？

Question

如果您在 React Nativestyle中的组件的 prop 中指定尺寸，则添加会使图像保持其纵横比并完全适合您在. 它还将在该框中水平和垂直居中图像。<Image>resizeMode={'contain'}style

但是，据我所知，center与contain. 有什么不同？

Answer 1

不同之处在于图像如何适合 Image 容器。 center：图像将根据容器的大小在图像容器中居中。由于图像居中，它将在左侧、右侧和顶部、底部具有均匀的空间。

包含：图像安装在图像容器内，保持图像的纵横比。这意味着图像将从宽度或高度或两者接触容器壁，具体取决于哪一侧更大或更小。

Container 是 Image 组件本身。

为了查看操作上的差异，请为 Image 组件提供背景颜色。

查看 expo slack 以更好地理解它：https ://snack.expo.io/@saadqbal/resizemode

Answer 2

使用contain时满足以下条件

缩放图像宽度≤图像视图尺寸宽度
缩放图像高度≤图像视图尺寸高度

当您使用center如果图像小于视图时，它将在 x 和 y 方向上都有空格，具体取决于图像大小。如果它更大（除非您指定了比例）默认情况下它会缩小以包含在其中（这是它看起来类似于的情况contain）

如果图像大于视图，则将其均匀缩小，使其包含在视图中。文档

检查这个解释Mehran Khan在React Native中理解“resizeMode”

Answer 3

从官方文档中可以看出：

中心：

沿两个维度在视图中居中图像。如果图像大于视图，则将其均匀缩小，使其包含在视图中。

包含：

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

为了清楚地了解它，我会建议一个小技巧。

取一个 50*50 的视图并将图像放入其中。现在采取矩形（更高的高度）和方形图像。看到不同。