Как отобразить анимированный SVG в реагировать на родной?

Question

Как отобразить анимированный SVG (с ключевыми кадрами) в реагирующем родном? В настоящее время я могу отображать только stati c SVG.

Похоже, что Reaction-native-svg может отображать только stati c svgs.

Вот фрагмент кода SVG:

const xml = `<svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        width="64"
        height="64"
        viewbox="0 0 64 64">
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        <style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
  0% {
    -webkit-transform: translate(0px,0px);
       -moz-transform: translate(0px,0px);
        -ms-transform: translate(0px,0px);
            transform: translate(0px,0px);
  }

  50% {
    -webkit-transform: translate(2px,0px);
       -moz-transform: translate(2px,0px);
        -ms-transform: translate(2px,0px);
            transform: translate(2px,0px);
  }

  100% {
    -webkit-transform: translate(0px,0px);
       -moz-transform: translate(0px,0px);
        -ms-transform: translate(0px,0px);
            transform: translate(0px,0px);
  }
}

.am-weather-cloud-2 {
  -webkit-animation-name: am-weather-cloud-2;
     -moz-animation-name: am-weather-cloud-2;
          animation-name: am-weather-cloud-2;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

...

<SvgXml xml={xml} width="100%" height="100%" />

Answer 1

Я бы посоветовал проверить пакет «Реальный лотос» ie, если вы можете преобразовать анимацию в ie файлы json лота, тогда будет легко отобразить

Answer 2

Дисплей SVG In-native Use react-native-svg or lottie-react-native

https://github.com/react-native-community/react-native-svg

https://github.com/react-native-community/lottie-react-native