时间戳

首页 > 解决方案 > 将 svg 转换为 react-native-svg

javascript - 将 svg 转换为 react-native-svg

问题描述

最简单的方法是什么？我发现很多 svg 到 JSX 转换器，这正是我想要的，但这在 react-native 中不起作用。我需要将 svg 代码转换为可以使用 react-native-svg 在我的应用程序中显示的内容。谢谢！

标签： javascriptreact-nativesvg

解决方案

我可以想到以下选项。您使用的将取决于您必须转换的文件数量。

选项 1（少量文件）

在此站点上复制粘贴您的 svg 代码并选中 React Native 复选框。这将为您提供代码，然后您可以将其与react-native-svg一起使用

在以下代码中使用该输出（将 SvgComponent 替换为生成的内容）：

import React, { Component } from 'react';
import { View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

const SvgComponent = props => (
  <Svg viewBox="0 0 48 1" style={props.style}>
    <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </Svg>
);

class MySVGIcon extends Component {
  render() {
    const { style } = this.props;
    const component = SvgComponent(style);

    return <View style={style}>{component}</View>;
  }
}

export default MySVGIcon;

选项 2（许多文件）

您可以使用react-native-remote-svg将它们直接嵌入到代码中，而不是转换它们。

例如，您可以这样做：

import Image from 'react-native-remote-svg';

class MyImageClass extends Component {

  render () {
    // Embed code or read a SVG file...
    const mySVGImage = '<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect></svg>';

    return (
        <Image source={{
                          uri: "data:image/svg+xml;utf8," + mySVGImage
                      }}/>
    );
  }
}

选项 3（最酷的选项）

它不像其他两个选项那样免费，但也不昂贵。PaintCode是我喜欢的工具之一。版本 3+ 现在支持 java 脚本。所以你可以在其中加载你的 svg 文件，它会吐出你可以在你的应用程序中使用的代码。这里的优点是界面比上面的第一个选项更友好，然后您可以从代码中为 svg 文件中的每个对象设置动画。

推荐阅读