Рендеринг десятков SVG-файлов без задержек на React Native?

#react-native #svg

Вопрос:

Мне нужно отобразить десятки довольно сложных SVG-файлов на экране в приложении чата React native.

Каждый SVG-файл представляет собой аватар с 3 оттенками, цвет которого я меняю с помощью кода в соответствии с предпочтениями пользователя.

Поскольку я меняю цвета динамически, в настоящее время я отображаю SVG-файлы как компоненты в Webview .

Это работает нормально, но когда у меня появляется дюжина таких файлов на экране (например, в загруженной комнате чата), у меня возникают серьезные проблемы с производительностью.

Какой был бы хороший подход для сохранения моих раскрашенных SVG-файлов И производительности?

1. Вы пробовали github.com/react-native-community/react-native-svg ?

2. Я сделал. Это то, что я использую для SVG-файлов, которые не нуждаются в раскрашивании. Это не позволяет мне редактировать код SVG, чтобы изменить цвет каждой группы так, как мне нужно, что заставляет меня вернуться к Webview.

3. К сожалению, поддержка svg в мобильных мирах все еще довольно плоха

4. Подождите, на самом деле я проверил еще раз, и я полностью пропустил SvgCss компонент. Я только видел SvgCssUri . С помощью этого мне удалось загрузить мою измененную строку SVG, и производительность определенно улучшилась!

Ответ №1:

Использование SVGCSS от react-native-svg значительно улучшило производительность.