react-native - 在 React-Native 应用程序上加载巨大的 SVG 的最佳方式是什么?
问题描述
我正在开发一个应用程序,它基本上是一个协作绘图工具。
我有一个巨大的 SVG 原图 (4.5 MB),用户可以登录 pan 并在这个原图上绘制他们自己的画。
我使用 react-native-svg 和 react-native-svg-transformer。我尝试了 2 种方法,但都失败或不够好:
第一个是添加资产并导入为:
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"
/>
使用这种方法,我有两个问题:
我不能有装载机。所以它显示一个空白屏幕,当它从我的服务器下载 4 MB 时,只显示一个空白屏幕。
然后,加载时,缩放或平移时的性能也太差了。
有人对这种情况下的最佳方法有什么建议吗?
解决方案
推荐阅读
- regex - Flutter Dart:如何从视频 URL 中提取 youtube 视频 ID?
- java - 为什么 HashSet.contains() 返回错误的结果?
- node.js - 从 Object.values nodejs 将数组转换为字符串
- python - 如何修复“ImportError: cannot import name 'setup' form 'cx_Freeze'”
- php - 选择按天分组的列值总和
- ios - 如何在 Xcode 中支持 iPhone 的多种屏幕尺寸?
- swift - 如何在 Xcode 11 Playground 中使用图像?
- python - 如何将此代码转换为 for 循环格式?
- python - PIP install Wheel 文件有效,但同一软件包的同一版本的 tar 文件无效
- kubernetes - 当部署在一个 pod 中的应用程序调用部署在 minikube 中另一个 pod 中的另一个应用程序时出现问题