React Native中如何使用或自定义srcset？

React Native 的原生 Image 组件确实不支持 Web 中的 srcset 属性，但可以通过第三方库或自行封装组件实现相同的响应式图片加载逻辑。

一、使用第三方库快速实现 #

有不少成熟的库已经封装了类似 srcset 的功能，比如：

• react-native-responsive-image：支持根据屏幕尺寸和像素比自动选择合适的图片源，配置简单，直接传入不同分辨率的图片地址即可。
• react-native-fast-image：除了更优的加载性能，也支持通过 source 属性传入多分辨率图片，结合设备像素比自动适配。

以 react-native-responsive-image 为例，基础用法如下：

import ResponsiveImage from 'react-native-responsive-image';

<ResponsiveImage
  source={{
    uri: {
      '1x': 'https://example.com/image_480w.jpg',
      '2x': 'https://example.com/image_960w.jpg',
      '3x': 'https://example.com/image_1440w.jpg'
    }
  }}
  style={{ width: 200, height: 200 }}
/>

二、自行封装实现 srcset 逻辑 #

如果不想依赖第三方库，可以基于 React Native 的 PixelRatio 和 Dimensions API 手动实现核心逻辑，步骤如下：

1. 核心思路 #

Web 的 srcset 本质是根据设备像素比（DPR）和图片显示尺寸，选择最匹配的高分辨率图片，避免加载过大资源或显示模糊。在 React Native 中，我们可以：

• 通过 PixelRatio.get() 获取当前设备的像素比
• 通过 Dimensions.get('window') 获取屏幕尺寸，或结合组件的布局尺寸计算所需图片的最优宽度
• 预定义不同分辨率/宽度的图片地址，根据计算结果选择对应的图片源

2. 基础封装组件 #

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

const ResponsiveImage = ({ srcSet, style, ...props }) => {
  const pixelRatio = PixelRatio.get();
  const windowWidth = Dimensions.get('window').width;
  // 假设组件宽度默认占屏幕一半，可根据实际需求调整
  const imageDisplayWidth = style?.width || windowWidth / 2;
  // 计算所需图片的最小宽度（显示宽度 * 像素比）
  const requiredWidth = imageDisplayWidth * pixelRatio;

  // 从srcSet中筛选最接近且满足需求的图片
  let bestSrc = srcSet[0].uri;
  let bestWidth = srcSet[0].width;
  srcSet.forEach(item => {
    if (item.width >= requiredWidth && item.width < bestWidth) {
      bestSrc = item.uri;
      bestWidth = item.width;
    }
  });

  return <Image source={{ uri: bestSrc }} style={style} {...props} />;
};

// 使用示例
<ResponsiveImage
  srcSet={[
    { uri: 'https://example.com/image_480w.jpg', width: 480 },
    { uri: 'https://example.com/image_960w.jpg', width: 960 },
    { uri: 'https://example.com/image_1440w.jpg', width: 1440 }
  ]}
  style={{ width: '50%', height: 200 }}
/>

3. 进阶优化（参考文章思路） #

那篇关于响应式图片加载的文章提到了更精细的优化方案，核心包括：

• 动态获取布局尺寸：通过 onLayout 监听组件实际渲染的尺寸，适配复杂布局场景
• 缓存计算结果：对已确定的最优图片源进行缓存，避免重复计算
• 降级加载：网络不佳时自动切换到低分辨率图片，提升加载速度

优化后的组件示例（简化版）：

import React, { useState, useCallback } from 'react';
import { Image, PixelRatio, View } from 'react-native';

const ResponsiveImage = ({ srcSet, style, ...props }) => {
  const [bestSrc, setBestSrc] = useState(srcSet[0].uri);
  const [cachedSize, setCachedSize] = useState(null);

  const calculateBestSrc = useCallback((layoutWidth) => {
    if (cachedSize === layoutWidth) return;
    const pixelRatio = PixelRatio.get();
    const requiredWidth = layoutWidth * pixelRatio;

    let selectedSrc = srcSet[0].uri;
    let minDiff = Infinity;
    srcSet.forEach(item => {
      const diff = Math.abs(item.width - requiredWidth);
      if (diff < minDiff) {
        minDiff = diff;
        selectedSrc = item.uri;
      }
    });

    setBestSrc(selectedSrc);
    setCachedSize(layoutWidth);
  }, [srcSet, cachedSize]);

  return (
    <View onLayout={(e) => calculateBestSrc(e.nativeEvent.layout.width)} style={style}>
      <Image source={{ uri: bestSrc }} style={{ width: '100%', height: '100%' }} {...props} />
    </View>
  );
};

三、注意事项 #

• 确保不同分辨率的图片命名规则统一，便于维护
• 本地图片可通过 PixelRatio.getPixelSizeForLayoutSize() 直接适配，比如 require(./image_${PixelRatio.get()}x.png)
• 结合图片缓存库使用，提升重复加载的性能

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