React Native Get Optimized Image Source from URI-CodePudding

I have a request from the server that returns a JSON with and image like this:

    {
      "id": 1,
      "image": "https://static.urace.me/uploaded/8/2/82bef7512cd9f7ead00a0c2573d80417-108x108.jpg",
      "name": "Test",
    },

Here is the image with the size of 108x108 (technically, @1x), but there are also other sizes for images available on the server. If we use the same link but add @2x before .jpg we would get higher quality image, the same goes for @3x:

https://static.urace.me/uploaded/8/2/[email protected]

When i use <Image/> component i use the link like so:

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

but it would show the "@1x" image which is not desired.

So, How to make it use @3x automatically without creating a split-modify function or using native embedding like described in docs?

Image React Native Docs

CodePudding user response：

As you can see from the documentation it is build-time functionality, not a runtime. This means you need to implement your logic by yourself using https://reactnative.dev/docs/dimensions for example.