如何使用react-native-svg的SvgUri组件缓存SVG文件？

由于<SvgUri>本身没有内置缓存机制，你可以通过先下载SVG到本地缓存目录，再用<Svg>组件加载本地文本内容的方式实现缓存，以下是具体实现方案：

自定义缓存SVG组件（基于Expo File System） #

如果使用Expo生态，推荐用expo-file-system处理文件下载与缓存，步骤如下：

1. 安装依赖

expo install expo-file-system react-native-svg

2. 实现CachedSvgUri组件

import React, { useState, useEffect } from 'react';
import { Svg } from 'react-native-svg';
import * as FileSystem from 'expo-file-system';

const CachedSvgUri = ({ uri, cacheExpiry = 7, ...rest }) => {
  const [svgXml, setSvgXml] = useState(null);
  // 用URI的哈希值作为缓存文件名，避免重复
  const cacheFileName = encodeURIComponent(uri) + '.svg';
  const cachePath = `${FileSystem.cacheDirectory}${cacheFileName}`;
  // 缓存过期时间（默认7天，单位：天）
  const expiryMs = cacheExpiry * 24 * 60 * 60 * 1000;

  useEffect(() => {
    const loadAndCacheSvg = async () => {
      try {
        const fileInfo = await FileSystem.getInfoAsync(cachePath);
        const now = Date.now();

        // 缓存存在且未过期，直接读取本地内容
        if (fileInfo.exists && (now - fileInfo.modificationTime) < expiryMs) {
          const localSvg = await FileSystem.readAsStringAsync(cachePath);
          setSvgXml(localSvg);
          return;
        }

        // 缓存不存在/已过期，下载并保存到缓存目录
        const downloadResult = await FileSystem.downloadAsync(uri, cachePath);
        if (downloadResult.status === 200) {
          const newSvg = await FileSystem.readAsStringAsync(cachePath);
          setSvgXml(newSvg);
        }
      } catch (error) {
        console.error('SVG缓存加载失败:', error);
        // 可选：加载失败时 fallback 到<SvgUri>
        // setSvgUriFallback(true);
      }
    };

    loadAndCacheSvg();
  }, [uri, cacheExpiry]);

  if (!svgXml) {
    return null; // 替换为你的加载占位组件
  }

  return <Svg xml={svgXml} {...rest} />;
};

export default CachedSvgUri;

3. 使用组件

import CachedSvgUri from './CachedSvgUri';

// 用法和<SvgUri>一致，额外支持cacheExpiry参数设置缓存有效期
<CachedSvgUri uri="https://example.com/your-icon.svg" width={24} height={24} cacheExpiry={3} />

原生React Native环境适配 #

如果是纯原生React Native项目，将expo-file-system替换为react-native-fs即可，核心逻辑一致：

• 安装react-native-fs：npm install react-native-fs
• 替换文件操作API（如RNFS.cacheDirectory、RNFS.readFile、RNFS.downloadFile等）

关键注意点 #

• 确保下载的SVG是纯文本格式，避免二进制文件导致渲染失败
• 可根据需求添加缓存清理逻辑（比如定期清理过期文件）
• 加载失败时可添加降级逻辑（如显示默认图标或直接使用<SvgUri>）

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