React native 在React本机应用程序上加载大型SVG的最佳方式是什么？

我正在开发一个应用程序，它基本上是一个协作绘图工具

我有一个巨大的SVG原始图形（4.5MB），用户可以登录pan并在此原始图形上绘制自己的绘画

Im使用react-native svg和react-native svg transformer。我尝试了两种方法，但都失败或不够好：

第一个是添加资产并导入为：

import Earth from './FinalEarth.svg';

问题是它向我显示了以下错误：

RangeError:超出了最大调用堆栈大小

This error is located at:
    in SvgComponent (at DrawView.js:265) 

另一种方法是从URI加载它。像这样：

 <Svg
        style={styles.drawSurface}
        width={this.props.width}
        height={this.props.height}
      >
        <G
          transform={{
            translateX: left * resolution,
            translateY: top * resolution,
            scale: zoom
          }}
        >
         <SvgCssUri
            width="100%"
            height="100%"
            uri="myurl//EarthCompact.svg?alt=media&token=3435369a-6fb7-4d05-91ca-b6b7c7a2e28e"
          />

使用这种方法，我有两个问题：

我不能有装载机。所以它显示一个空白屏幕，当它从我的服务器下载4MB时，只显示一个空白屏幕

然后，加载时，缩放或平移时的性能也太差了

---

有人对本案的最佳解决方案有什么建议吗

简化SVG。或者将图形拆分为小块，并在平移时动态加载一块。简化SVG。或者将图形拆分为小块，并在平移时动态加载一块。