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,
  ...
}

使用react-native-svg对静态SVG文件进行动画处理

2 个答案: