【问题标题】:React Native Image resizeMode vs resizeMethodReact Native Image resizeMode vs resizeMethod
【发布时间】:2017-06-02 19:00:59
【问题描述】:

我目前使用的是 RN 41.2,我对从 url 调整图像大小有疑问。 url 文件可能会变得非常大,通常在 2000x2000 左右,我想将它们显示得更小,可能在 25x25 左右。

'android only' resizeMethod 是否有等效的 iOS Image 道具?

当 resizeMethod='resize' 时,它会在解码之前更改大编码图像的大小,因此图像几乎立即以较小的尺寸显示,这很棒。

但对于 iOS,我使用的是 resizeMode(包含、覆盖等),它可以正确显示图像,但图像实际出现总是需要一些时间,这是完全可以理解的,只是很烦人。

我在这里遗漏了什么吗?似乎 resizeMode 应该做与 resizeMethod 相同的事情,但显然没有

【问题讨论】:

    标签: image react-native react-native-android react-native-ios react-native-image


    【解决方案1】:

    调整大小模式属性决定了 RAW 图像应如何适合其框架(覆盖、包含、拉伸、居中、重复) 参考https://reactnative.dev/docs/image#resizemode

    此外,对于 android,我们可以选择应该用于调整图像大小的机制,即使用 resizeMethod 属性进行缩放、调整大小或自动。 参考https://reactnative.dev/docs/image#resizemethod-android

    基本上 resizeMode 指示如何调整图像大小,resizemethod 定义用于调整大小的机制

    这是因为当帧大小和 RAW 图像大小变化很大(图像太大:帧太小或图像太小和帧太大)时,android 中存在一些问题,并且可能会出现明显的延迟或设计中断,同时渲染为自动选择调整大小机制不是最佳的。 大多数情况下,您可以在不手动设置 resizeMethod 的情况下进行转义(默认为自动),但这会导致前面提到的场景出现问题。

    【讨论】:

      【解决方案2】:

      resizeMode 和 resizeMethod 是 Image 组件在 RN 中的两个属性。 resizeMode:确定当帧与原始图像尺寸不匹配时如何调整图像大小。 它可以作为值进行覆盖、包含、拉伸。

      resizeMethod:当图像的尺寸与图像视图的尺寸不同时,可以使用它来调整图像的大小。 它可以采用 auto、resize、scale 作为值。

      更多内容可以参考https://facebook.github.io/react-native/docs/image.html

      【讨论】:

      • 这似乎并没有使答案更加清晰。 “当框架与原始图像尺寸不匹配时如何调整图像大小”和“当图像尺寸与图像视图尺寸不同时用于调整图像大小”似乎相同。
      猜你喜欢
      • 2018-09-13
      • 1970-01-01
      • 2017-02-01
      • 1970-01-01
      • 2020-03-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多