React Native Expo多端应用加载URL SVG图片的问题解决咨询

方案一：下载SVG内容后用SvgXml渲染（最稳定兼容） #

直接使用SvgUri在安卓端易出现网络请求或解析兼容性问题，可通过Expo的FileSystem先下载SVG文本内容，再用SvgXml组件渲染，三端都能稳定运行：

1. 安装依赖（未安装时执行）：

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

2. 实现代码：

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

const RemoteSvg = ({ uri, width, height }) => {
  const [svgXml, setSvgXml] = useState(null);

  useEffect(() => {
    const fetchSvg = async () => {
      try {
        const svgContent = await FileSystem.readAsStringAsync(uri);
        setSvgXml(svgContent);
      } catch (err) {
        console.error('SVG加载失败:', err);
      }
    };

    uri && fetchSvg();
  }, [uri]);

  if (!svgXml) {
    return <View style={{ width, height, backgroundColor: '#f0f0f0' }} />; // 加载占位符
  }

  return <SvgXml xml={svgXml} width={width} height={height} />;
};

// 使用示例
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RemoteSvg 
        uri="http://mydomain/image.svg" 
        width="100%" 
        height="100%" 
      />
    </View>
  );
}

方案二：配置Expo Image组件支持SVG（简化方案） #

Expo的Image组件在Web、iOS端原生支持SVG，安卓端需额外配置：

1. 在app.json/app.config.js中添加安卓SVG支持配置：

{
  "expo": {
    "android": {
      // 其他配置...
      "usesCleartextTraffic": true, // 若SVG地址为http协议需开启
      "extra": {
        "svgSupport": true
      }
    }
  }
}

2. 直接使用Image组件（注意：复杂SVG可能渲染异常）：

import { Image } from 'react-native';

<Image
  source={{ uri: 'http://mydomain/image.svg' }}
  style={{ width: '100%', height: '100%' }}
/>

关键排查点 #

• 确认SVG文件无语法错误，Web端正常渲染则大概率没问题，可检查是否包含安卓不支持的SVG特性（如特殊滤镜、复杂渐变）。
• 安卓模拟器需能正常访问SVG地址，若为本地HTTP域名，必须开启usesCleartextTraffic配置。
• 确保react-native-svg版本与当前Expo SDK兼容，优先通过expo install安装而非npm install。

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