在 React-native 中使用SVG

在 React-Native 中使用 SVG 的一种简单而方便的方法。

在 React-native 中并不支持 SVG, 并且官方已经对此问题提出了回复,简单的说就是社区已经有了解决方案,所以官方并不会内置对 SVG 的处理,
如果想在 React-native 中使用 SVG,其实已经非常简单,分为以下几个部分。

准备工作

  1. 安装 react-native-svg

    npm i react-native-svg

    yarn add react-native-svg

  1. link 进项目

    react-native link react-native-svg

  2. 准备好自己需要的 svg 文件

  3. 打开这个在线转换工具

我以下面这个 svg 文件举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
class="icon"
width="200px"
height="200.00px"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#ffffff"
d="M612.685 511.995L872.61 252.139c13.48-13.454 20.906-31.351 20.906-50.394 0-19.02-7.41-36.907-20.922-50.423-13.452-13.412-31.32-20.8-50.31-20.8-18.991 0-36.858 7.388-50.359 20.85L511.95 411.278 251.944 151.321c-13.453-13.412-31.32-20.8-50.31-20.8-18.993 0-36.86 7.389-50.312 20.802l-0.146 0.147c-27.605 27.75-27.586 72.87 0.099 100.636l259.94 259.883-260 259.93c-27.63 27.715-27.644 72.837-0.032 100.583l0.172 0.171c13.26 13.2 31.585 20.77 50.278 20.77 18.968 0 36.824-7.375 50.28-20.77l260.038-259.97 259.974 259.916c13.455 13.452 31.34 20.86 50.36 20.86 19.014 0 36.898-7.406 50.323-20.826 13.483-13.452 20.908-31.349 20.909-50.39 0-19.042-7.424-36.94-20.873-50.36l-259.96-259.908z"
/>
</svg>

打开线转换工具之后,左侧选项栏里面,勾选 React Native

之后将自己 svg 文件内容贴在左侧,右侧会自动生成可以在 ReactNative 中运行的代码。

我将上面的代码转换之后得到了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from "react";
import Svg, { Path } from "react-native-svg";

const SvgComponent = props => (
<Svg
className="prefix__icon"
width={200}
height={200}
viewBox="0 0 1024 1024"
{...props}
>
<Path
fill="#fff"
d="M612.685 511.995L872.61 252.139c13.48-13.454 20.906-31.351 20.906-50.394 0-19.02-7.41-36.907-20.922-50.423-13.452-13.412-31.32-20.8-50.31-20.8-18.991 0-36.858 7.388-50.359 20.85L511.95 411.278 251.944 151.321c-13.453-13.412-31.32-20.8-50.31-20.8-18.993 0-36.86 7.389-50.312 20.802l-.146.147c-27.605 27.75-27.586 72.87.099 100.636l259.94 259.883-260 259.93c-27.63 27.715-27.644 72.837-.032 100.583l.172.171c13.26 13.2 31.585 20.77 50.278 20.77 18.968 0 36.824-7.375 50.28-20.77l260.038-259.97 259.974 259.916c13.455 13.452 31.34 20.86 50.36 20.86 19.014 0 36.898-7.406 50.323-20.826 13.483-13.452 20.908-31.349 20.909-50.39 0-19.042-7.424-36.94-20.873-50.36l-259.96-259.908z"
/>
</Svg>
);

export default SvgComponent;

得到 js 代码之后就可以在项目中新建一个 js 文件将转换后的代码写在文件内就可以当做普通的模块调用了,可以删除或者设定一个默认的宽高,删掉 className,通过设定 fill=currentColor,来让 svg 继承 color 的值。

对于有非常多的 SVG 文件来说,比如一次性有好几十个,那么一个一个的转换,实在太麻烦了,这个时候就可以通过脚本来实现

通过 @svgr/cli 提供的命令行工具来批量转入,这里需要几个关键的命令行参数

1
2
npx @svgr/cli --native -d 输出目录 输入目录

例如

npx @svgr/cli --native -d ./src/svg ./src/icon

这样就可以调用命令行程序进行批量转换

关于更多的配置可以参考文档