Анимированный файл * stati c SVG с реагировать-native-svg

Question

Я изо всех сил пытаюсь получить react-native-svg анимацию в React Native. Я также попробовал метод, который они предлагают, с react-native-svg-transformation, но он не подошел к моему случаю, так как я работаю со многими файлами и рендеринг их динамически. Вот мой файл рендеринга:

import React from "react";
import { View, Text } from "react-native";
import { SvgXml } from "react-native-svg";
import SvgAssets from "../resources/SvgAssets";
import AssetsHelper from "../common/AssetsHelper";

class ChineseCharacter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xmlData: "",
    };
  }

  render() {
    const { xmlData, file } = this.state;
    if (xmlData.length === 0) {
      return <View />;
    }

    return (
      <View style={{ flex: 1 }}>
        <SvgXml xml={xmlData} width="200" height="200" />
      </View>
    );
  }

  componentDidMount(): void {
    const { character } = this.props;
    const characterUnicode = character.charCodeAt(0);
    const file = SvgAssets[characterUnicode.toString()];
    AssetsHelper(file)
      .then(result => {
        this.setState({
          xmlData: result,
        });
      })
      .catch(err => console.log(err));
  }
}

export default ChineseCharacter;

AssetsHelper в основном читает файл svg и преобразует их в строку, чтобы перейти к SvgXml. SvgAssets - это объект с ключом в качестве charCode, а значением является файл, что-то вроде этого:

const assets = {
  "11904": require("./svgs/11904.svg"),
  ...
}

Заранее спасибо.

Answer 1

После нескольких трудных часов я нашел способ обойти эту проблему. Я больше не использую react-native-svg, вместо этого я анализирую файл .svg в строку и помещаю его в react-native-webview. Работай как шарм!

render() {
    // @ts-ignore
    const { xmlData, file } = this.state;
    if (xmlData.length === 0) {
      return <View />;
    }
    return (
      <View style={{ width: 300, height: 300 }}>
        <WebView
          source={{ html: xmlData }}
          style={{ backgroundColor: "transparent", width: 300, height: 300 }}
        />
      </View>
    );
  }

Answer 2

Попробуйте импортировать svg файлы внутри ChineseCharacter класса.

import svgXml11904 from './svgs/11904.svg'

const assets = {
  "11904": svgXml11904,
  ...
}