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

Question

如果您在React Native的style组件的<Image>道具的resizeMode={'contain'}属性中指定尺寸，则添加style会导致图像保留其长宽比并完全适合您所选择尺寸的框中已在center中指定。它将使图像在该框中水平和垂直居中。

但是，据我所知，contain与from kivy.config import Config Config.set('graphics', 'multisamples', '0') 的作用相同。有什么区别？

Answer 1

不同之处在于图像在图像容器中的放置方式。 居中：根据图像容器的大小，图像将在图像容器中居中。因为图像居中，所以它在左右，上，下侧都有均匀的空间。

包含：将图像放置在图像容器内，并保持图像的长宽比。这意味着图像会从宽度或高度（或两者）接触容器壁，具体取决于哪一侧更大或更小。

容器是Image组件本身。

为了查看操作上的差异，请为“图像”组件赋予背景色。

请参阅博览会的松弛部分，以更好地理解它：https://snack.expo.io/@saadqbal/resizemode

Answer 2

在official document中说：

中心：

  

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

包含：

  

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

要对此有个清晰的主意，我建议一个小技巧。

以50 * 50的比例查看并将图像放入其中。现在拍摄矩形（具有更高的高度）和正方形图像。看看区别。

Answer 3

当您使用 contain 时，它满足以下条件

<块引用>

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

当您使用 center 时，如果图像小于视图，则根据图像大小，它会在 x 和 y 方向上都有空白空间。 如果它更大，那么（除非您指定了比例）默认情况下它会缩小以包含在其中（这是它的行为似乎类似于 contain 的情况）

<块引用>

如果图像比视图大，则将其均匀缩小以使其包含在视图中。 Documetation

检查这个解释Understanding “resizeMode” in React Native by Mehran Khan