React Native中远程SVG加载时如何实现加载骨架/指示器？

方法一：手动获取SVG内容，使用SvgXml渲染 #

这种方法能主动掌控加载状态，通过监听请求完成事件来切换显示：

1. 引入SvgXml和加载相关组件（比如ActivityIndicator或自定义骨架）
2. 用状态管理加载状态与SVG文本内容
3. 组件挂载时发起请求获取SVG内容，成功后更新状态，加载中显示骨架/指示器

代码示例：

import { useState, useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { SvgXml } from 'react-native-svg';

function RemoteSVG() {
  const [isLoading, setIsLoading] = useState(true);
  const [svgXml, setSvgXml] = useState('');

  useEffect(() => {
    const fetchSvg = async () => {
      try {
        const response = await fetch('https://cdn.orsive.com/avatars/3tYL96SMyBcwUakNphevH-avatar.svg');
        const xml = await response.text();
        setSvgXml(xml);
      } catch (err) {
        console.error('SVG加载失败:', err);
        // 可在此添加加载失败的占位逻辑
      } finally {
        setIsLoading(false);
      }
    };

    fetchSvg();
  }, []);

  if (isLoading) {
    // 替换为自定义骨架组件即可实现更复杂效果
    return (
      <View style={{ width: 100, height: 100, backgroundColor: '#e0e0e0', borderRadius: 50, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator color="#666" />
      </View>
    );
  }

  return (
    <SvgXml
      xml={svgXml}
      style={{ width: 100, height: 100 }}
    />
  );
}

方法二：通过View叠加实现状态切换 #

无需修改SVG加载逻辑，利用状态控制骨架的显示与隐藏：

1. 用状态标记SVG是否加载完成
2. 将骨架View与SvgUri叠加，加载中显示骨架，完成后隐藏
3. 借助SvgUri的onLayout事件（渲染完成时触发）更新状态

代码示例：

import { useState, View } from 'react-native';
import { SvgUri } from 'react-native-svg';
import { ActivityIndicator } from 'react-native';

function RemoteSVG() {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <View style={{ width: 100, height: 100, position: 'relative' }}>
      {/* 加载骨架/指示器 */}
      {!isLoaded && (
        <View style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: '#e0e0e0',
          borderRadius: 50,
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1,
          pointerEvents: 'none'
        }}>
          <ActivityIndicator color="#666" />
        </View>
      )}
      {/* SVG组件 */}
      <SvgUri
        uri={"https://cdn.orsive.com/avatars/3tYL96SMyBcwUakNphevH-avatar.svg"}
        style={{ width: 100, height: 100 }}
        onLayout={() => setIsLoaded(true)}
      />
    </View>
  );
}

注意事项 #

• 方法二的onLayout事件能准确捕获SVG渲染完成的时机，不会出现背景残留问题
• 若需要骨架动画，可使用react-native-skeleton-placeholder这类第三方库实现
• 记得处理SVG加载失败的场景，比如显示错误占位图

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