【问题标题】:React Native Image resizeMode: difference between 'center' and 'contain'?React Native Image resizeMode:“中心”和“包含”之间的区别?
【发布时间】:2019-11-22 03:35:04
【问题描述】:

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

然而,据我所知,centercontain 做同样的事情。有什么区别?

【问题讨论】:

    标签: react-native react-native-image


    【解决方案1】:

    区别在于图像如何适合图像容器。 居中:图片会根据容器的大小在图片容器中居中。由于图像居中,它将在左侧、右侧和顶部、底部具有均匀的空间。

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

    Container 是 Image 组件本身。

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

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

    【讨论】:

    • 我查看了您链接的 Expo 示例,在 containcenter 之间进行更改没有区别。
    • 当你说center“左、右、上、下有统一的空间”时,你的意思是左边的空间等于右边的空间吗? , 顶部的空间等于底部的空间,但左/右空间不一定等于顶部/底部空间?如果是这样,这似乎与contain 完全相同。
    • 我提交了修改以改进此答案。主要区别在于center 不会放大,但contain 会放大图像。
    【解决方案2】:

    official document 说:

    中心

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

    包含

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

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

    查看 50*50 并将图像放入其中。现在采取矩形(更高的高度)和方形图像。看看区别。

    【讨论】:

    • 我试过了,没有发现containcenter 的行为有区别。有什么区别?
    【解决方案3】:

    当你使用contain时,它满足以下条件

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

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

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

    查看此说明Understanding “resizeMode” in React Native by Mehran Khan

    【讨论】:

      猜你喜欢
      • 2018-09-13
      • 2017-02-01
      • 1970-01-01
      • 2018-11-17
      • 1970-01-01
      • 2020-12-31
      • 1970-01-01
      • 2014-06-15
      • 2017-06-15
      相关资源
      最近更新 更多