使用react-native-svg制作静态SVG文件动画

Question

我正在努力在React Native中创建react-native-svg动画。我也用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

尝试在ChineseCharacter类中导入svg文件。

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

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