React Native 从 URI 获取优化的图像源

Question

我有一个来自服务器的请求，它返回一个带有如下图像的 JSON：

    {
      "id": 1,
      "image": "https://image-url.jpg",
      "name": "Test",
    },

这是尺寸为 108x108（技术上为@1x）的图像，但服务器上还有其他尺寸的图像可用。如果我们使用相同的链接，但在.jpg 之前添加@2x，我们将获得更高质量的图像，@3x 也是如此：

https://image-url@3x.jpg

当我使用<Image/> 组件时，我使用如下链接：

<Image 
   source={data.image}
   style={{width: 108, height: 108}}
/>

但它会显示不需要的“@1x”图像。

那么，如何在不创建拆分修改函数或使用文档中描述的本机嵌入的情况下使其自动使用@3x？

Image React Native Docs

Answer 1

正如您从文档中看到的那样，它是构建时功能，而不是运行时。这意味着您需要自己使用https://reactnative.dev/docs/dimensions 来实现您的逻辑。