将 svg 转换为 reactnativesvg

我可以想到以下几种 Select .您使用的版本取决于需要转换的文件数量.

Option 1(几乎没有文件)

将svg代码复制粘贴到site上，并选中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;

Option 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
                      }}/>
    );
  }
}

Option 3(最酷的选项)

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