Question

我正在使用 MapView，标记和SvgUri 在地图上加载 N 个标记。

我的问题是我该如何改进此代码以更快地渲染SvgUri，因为它是同一张Uri图像，什么变化只是标记位置！

我想到的是对其进行缓存，因此第一次具有加载时间，而另一个仅获得具有相同图标的SVG参考，但是我现在不知道它是如何完成的。必须使用SvgUri而非本地Svg

完成

任何人都知道如何解决或已经解决类似问题？现在每个标记添加大约需要1到5s来加载SvgUri图像，我的想法是尝试最大程度地减少SvgUri加载时间！

它显示默认标记，加载后会重新渲染，并显示Svg。

以下代码是目前如何实现的示例。

package.json 中的库：

"react": "16.9.0", 
"react-native": "0.61.1", 
"react-native-maps": "^0.25.0", 
"react-native-svg": "^9.8.4",

示例代码：

import MapView, { Marker } from 'react-native-maps';
import { SvgUri } from 'react-native-svg';


renderMarkers = () {
  // This function return N markers like renderMarker()
  // How to pre render SvgUri to not have loading timer
  // Local Svg does not work for me, it must be Uri.
}

renderMarker = (lat, lng) => {
  var url = "http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg";

  return (
    <Marker
      coordinate={{
        latitude: lat,
        longitude: lng
      }}>
        <SvgUri width="30" height="30" uri={url} />
      </Marker> 
      );  
}

  render() {
  return(
  return (
    <View style={{ flex: 1 }}>
      <MapView>
        {this.renderMarkers()}
    </MapView>
    </View>
  )

如何改善多个元素的SvgUri渲染

0 个答案: