Каков наилучший способ загрузить огромный SVG в приложение React-Native? - PullRequest
Новая
       24

Каков наилучший способ загрузить огромный SVG в приложение React-Native?

1 голос
/ 21 апреля 2020

Я разрабатываю приложение, которое в основном является инструментом для рисования.

У меня есть ОГРОМНЫЙ оригинальный чертеж SVG (4,5 МБ), и пользователи могут войти в систему панорамирования и нарисовать свои собственные рисунки на этом оригинальном чертеже.

Я использую реактив-native-svg и реактор-native-svg-трансформатор. Я испробовал 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"
          />

При таком подходе у меня есть 2 проблемы:

У меня не может быть загрузчика. Таким образом, он показывает пустой экран, и пока он загружает 4 МБ с моего сервера, отображается только пустой экран.

А потом, при загрузке, производительность слишком плохая при масштабировании или панорамировании.

У кого-нибудь есть предложения относительно наилучшего подхода к этому делу?

...