React Native如何自动获取@3x规格的优化图片资源

核心方案 #

封装一个自定义图片组件，内部自动对传入的图片URI进行处理，在.jpg后缀前插入@3x，再传递给原生<Image/>组件。业务代码无需手动修改接口返回的URI，直接替换组件即可实现自动加载高清图。

代码实现（以React Native为例） #

import React from 'react';
import { Image, ImageProps } from 'react-native';

const CustomImage = (props: ImageProps) => {
  const { source, ...restProps } = props;

  // 自动给URI添加@3x后缀
  const processUri = (uri: string) => {
    return uri.replace(/\.jpg$/, '@3x.jpg');
  };

  let processedSource = source;
  // 仅处理带uri的远程图片源
  if (typeof source === 'object' && source.uri) {
    processedSource = {
      ...source,
      uri: processUri(source.uri),
    };
  }

  return <Image source={processedSource} {...restProps} />;
};

export default CustomImage;

实际使用 #

把项目中原来的<Image/>组件替换为这个自定义组件即可：

// 原写法
<Image source={{ uri: 'https://image-url.jpg' }} style={{ width: 108, height: 108 }} />

// 替换后
<CustomImage source={{ uri: 'https://image-url.jpg' }} style={{ width: 108, height: 108 }} />

进阶适配（根据设备像素比自动选择） #

如果需要根据设备的像素比自动匹配@2x或@3x图片，可以添加像素比判断逻辑：

import { PixelRatio } from 'react-native';

// 修改processUri函数
const processUri = (uri: string) => {
  const pixelRatio = PixelRatio.get();
  // 根据像素比选择对应后缀
  const resolutionSuffix = pixelRatio >= 3 ? '@3x' : pixelRatio >= 2 ? '@2x' : '';
  return uri.replace(/\.jpg$/, `${resolutionSuffix}.jpg`);
};

这样组件会自动根据设备加载最合适的分辨率图片，兼顾清晰度和加载性能。

内容的提问来源于stack exchange，提问作者denistepp