1

我正在努力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"),
  ...
}

预先感谢。

4

2 回答 2

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>
    );
  }
于 2020-03-10T09:10:31.507 回答
0

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

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

const assets = {
  "11904": svgXml11904,
  ...
}
于 2020-03-10T05:48:34.017 回答