在React Native中使用ART
React Native ART 究竟是什么?
所謂ART，是一個在React中繪制矢量圖形的JS類庫。這個類庫抽象了一系統(tǒng)的通用接口，統(tǒng)一了SVG，canvas，VML這類矢量圖形在React中的書寫格式。你可以通過ART將SVG，canvas，VML的矢量圖形拿到React中使用，也可以把ART反轉(zhuǎn)回去。（雖然有很多局限性，后面會講到）React Native ART 是react-art在React Native中的移植版，接口幾乎完全一致，React Native中的ART很早之前就已經(jīng)開源了iOS版，最近又在0.18.0中開源了Android版本因為缺少官方文檔，一直不為人所知。
為什么要在React Native中使用 ART?
我在前端頁面切片的時候比較喜歡用SVG，有條件我都盡量讓設計師出AI的設計稿或者把圖標導成SVG的因為SVG和圖片相比，優(yōu)點太多太多：可以代碼復用，可以無損放大，通過合理導出的svg代碼比同等壓縮過的圖片文件大小要小很多，而且svg代碼還可以通過gzip壓縮最近在做一個原生內(nèi)嵌的React Native項目，設計師是按照原生APP的標準把每個圖標切了3個尺寸給我，感謝React Native中強大的打包工具，可以很方便的使用這寫圖標。所以項目開始也沒想著要用SVG（當時android的ART還沒開源，這也是一個重要因素）。在整個項目完成之后，看了一下，所有圖片在經(jīng)過壓縮之后加起來有200多K，大小還可以接受。但是在項目后期優(yōu)化過程中，發(fā)現(xiàn)一個使用圖片圖標非常致命的問題：
<Image />元素在iOS下不是同步渲染的，即使是使用的本地圖片資源！更過分的是具有相同source
的多個Image也不能在同一幀里面渲染出來的，如下的5個圖標，在iOS下它們不會同時被渲染出來，這樣造成的影響是在打開一個列表的時候，看見這些圖標一個接一個無序的跳出來，這個效果如果在iphone4s，5s下看相當?shù)拿黠@，很惡心，完全不能忍受！想過各種方法也沒辦法繞過去。
首屏的如下幾個圖標以及返回按鈕和logo，還有TabBar里面的圖標在iOS下都是在界面出現(xiàn)的若干幀之后再無序的跳出來，這樣的效果很不好，一點都沒有原生APP的感覺，有一種hybird的既視感。
后來等到了0.18.0，Android的ART對外開源了，我想到為什么不用SVG圖標嘗試一下呢？然后讓設計師把這個圖標：
<Surface width={50} height={50}> <Group scale={0.23}> <Shape fill={`${this.props.active ? '#ff5942' : '#ccc'}`} d={`M46.31,0H3.69C1.63,0,0,1.63,0,3.69v42.63C0,48.37,1.63,50,3.69,50h42.63c2.05,0,3.69-1.63,3.69-3.69V3.69C50,1.63,48.37,0,46.31,0z M44.5,22.92l-7.76,7.65l1.8,10.61c0.18,1.07-0.29,2.14-1.21,2.77c-0.51,0.34-1.1,0.52-1.69,0.52c-0.49,0-0.98-0.12-1.42-0.35l-9.23-4.75l-9.23,4.75c-0.44,0.24-0.94,0.35-1.42,0.35c-0.6,0-1.19-0.17-1.69-0.52c-0.92-0.63-1.38-1.69-1.21-2.77l1.8-10.61l-7.76-7.65c-0.77-0.76-1.04-1.86-0.69-2.87c0.35-1.01,1.25-1.73,2.34-1.9l10.6-1.55l4.6-9.43c0.49-1,1.52-1.62,2.66-1.62c1.15,0,2.18,0.64,2.66,1.62l4.6,9.43l10.59,1.55c1.09,0.16,1.99,0.9,2.34,1.9C45.53,21.06,45.27,22.16,44.5,22.92z`} /> </Group></Surface>
這里面的路徑代碼是通過PS CC直接導出的，沒有做任何優(yōu)化，如果再優(yōu)化一番可以再縮小一半。SVG代碼優(yōu)化后面再做介紹。下面正式進入正題
如何在React Native中使用 ART？
安裝 ART
安裝ART很簡單安卓里面根本不用安裝，0.18.0里面自帶，直接在js引入既可
import React, {ART} from 'react-native';const {Surface, Group, Shape} = ART;
iOS里面的ART是可選的，你需要手動導入xcodeproj文件，以及加入靜態(tài)鏈接庫但是也很簡單：教程
使用ART
請大家原諒我，其實我是標題黨，我不會在這里詳細的講解ART的用法，而是講一個基于ART的SVG庫:react-native-art-svg
為什么我不在這里講ART呢？原因如下上面那段代碼是ART代碼和設計師給我svg代碼其實有一些差異，還要把SVG轉(zhuǎn)換一次，很不友好，因為ART的元素和SVG元素名稱和用法都不太一樣在SVG代碼里面，畫布元素是<svg>而ART里面是<Surface>繪制路徑的元素在SVG里面是<path>，而ART里面的Path又是另外一個東西，在ART里面需要<Shape>這都不是最麻煩的地方，一些基礎的SVG圖形<circle>、<rect>、<polygon>...等等的元素ART都是不支持的。前端切圖，不管是網(wǎng)頁還是React Native的界面，設計稿和圖標都是設計師給我們的（部分連設計都一起做了的大神除外）而設計師給我們的矢量圖標要么是AI原圖要么是SVG，但是最終到我們手里，導出來必定是SVG。所以ART雖然通過抽象接口來統(tǒng)一了SVG，canvas，VML在React中的使用，但是ART提供的接口還是相當不友好的。然后我就萌發(fā)了一個想法，為什么不再把ART封裝一層，把語法封裝成和SVG的語法呢？然后react-native-art-svg就誕生了，支持SVG所有常用的元素和屬性，svg代碼拿過來幾乎可以直接使用(后面會添加直接導入svg代碼的功能)
預覽圖如下:
安裝很簡單，因為是純JavaScript的類庫，直接一行搞定npm i react-native-art-svg --save
通過如下代碼在js中引入
import Svg, { Circle, Ellipse, G, LinearGradient, RadialGradient, Line, Path, Polygon, Polyline, Rect, Symbol, Text, Use, Defs, Stop} from 'react-native-art-svg';
上面的ART代碼等同于如下的代碼
<Svg width={50} height={50}> <G scale={0.23}> <Path fill={${this.props.active ? '#ff5942' : '#ccc'}} d={M46.31,0H3.69C1.63,0,0,1.63,0,3.69v42.63C0,48.37,1.63,50,3.69,50h42.63c2.05,0,3.69-1.63,3.69-3.69V3.69C50,1.63,48.37,0,46.31,0z M44.5,22.92l-7.76,7.65l1.8,10.61c0.18,1.07-0.29,2.14-1.21,2.77c-0.51,0.34-1.1,0.52-1.69,0.52c-0.49,0-0.98-0.12-1.42-0.35l-9.23-4.75l-9.23,4.75c-0.44,0.24-0.94,0.35-1.42,0.35c-0.6,0-1.19-0.17-1.69-0.52c-0.92-0.63-1.38-1.69-1.21-2.77l1.8-10.61l-7.76-7.65c-0.77-0.76-1.04-1.86-0.69-2.87c0.35-1.01,1.25-1.73,2.34-1.9l10.6-1.55l4.6-9.43c0.49-1,1.52-1.62,2.66-1.62c1.15,0,2.18,0.64,2.66,1.62l4.6,9.43l10.59,1.55c1.09,0.16,1.99,0.9,2.34,1.9C45.53,21.06,45.27,22.16,44.5,22.92z} /> </G></Svg>
這段代碼從SVG轉(zhuǎn)過來可省心多了，只需要改一下元素的大小寫，把元素名稱改成大寫字母開頭的既可，屬性名稱改成駝峰式的命名方式。
通用屬性列表：
屬性名稱
默認值
描述
fill
'#000'
內(nèi)部填充規(guī)則(填充顏色，填充漸變圖形)
fillOpacity
1
填充的透明度
stroke
'none'
描邊顏色
strokeWidth
1
描邊的寬度
strokeOpacity
1
描邊的透明度
strokeLinecap
'square'
描邊線段端點顯示方式
strokeLinejoin
'miter'
描邊線段連接處的顯示方式
strokeDasharray
[]
描邊線段斷點顯示規(guī)則
x
0
當前圖形x軸偏移量
y
0
當前圖形y軸偏移量
rotate
0
當前圖形旋轉(zhuǎn)值
scale
1
當前圖形的縮放值
origin
0, 0
變形原點(x,y,rotate,scale的變形原點坐標)
originX
0
變形原點x軸坐標
originY
0
變形原點y軸坐標
可以看到，幾乎所有SVG的常用屬性都可以支持不支持fillRule，因為官方認為fillRule不是SVG,canvas和VML公用的屬性，他們不對這類獨有的屬性進行支持暫不支持clipPath,因為ART官方還未完成
支持的元素列表：
Svg
Svg為所有矢量圖形的畫布元素，所有Svg內(nèi)的矢量圖形都會繪制在Svg內(nèi)部并且Svg支持viewbox和preserveAspectRatio屬性(關(guān)于這兩個屬性的詳解)
<Svg height="100" width="100"> <Rect x="0" y="0" width="100" height="100" fill="black" /> <Circle cx="50" cy="50" r="30" fill="yellow" /> <Circle cx="40" cy="40" r="4" fill="black" /> <Circle cx="60" cy="40" r="4" fill="black" /> <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" /></Svg>;
注意在react-native-art-svg中，所有元素的數(shù)字類型的屬性都可以直接用字符串表示，如:下面兩段屬性聲明都可以正常使用，這樣寫起來很方便height="100"
height={100}
矩形：Rect
<Rect>元素可以在畫布上繪制一個矩形，矩形位置和大小通過x,y,width,height屬性共同定義
<Svg width="200" height="60"> <Rect x="25" y="5" width="150" height="50" fill="rgb(0,0,255)" strokeWidth="3" stroke="rgb(0,0,0)" /></Svg>
上面的代碼繪制了一個左上角位于畫布25,5，寬150，高50的矩形并且使用藍色(rgb(0,0,255))填充(fill)內(nèi)部背景用黑色(rgb(0,0,0))進行描邊(stroke)，描邊寬度(strokeWidth)為3
圓型：Circle
<Circle>元素可以在畫布上繪制一個圓形，圓型需要cx,cy,r三個屬性，分別對應圓形x軸坐標，y軸坐標以及半徑
<Svg height="100" width="110"> <Circle cx="50" cy="50" r="50" fill="pink" /></Svg>
橢圓：Ellipse
<Ellipse>元素可以在畫布上繪制一個橢圓，橢圓和圓形類似，只是把圓形的r屬性替換成了分別對應水平半徑和垂直半徑的rx,ry屬性，rx == ry的橢圓是一個圓形
<Svg height="100" width="110"> <Ellipse cx="55" cy="55" rx="50" ry="30" stroke="purple" strokeWidth="2" fill="yellow" /></Svg>
直線：Line
<Line>元素可以在畫布上畫一條從x1,y1到x2,y2的直線
<Svg height="100" width="100"> <Line x1="0" y1="0" x2="100" y2="100" stroke="red" strokeWidth="2" /></Svg>
多邊形：Polygon
<Polygon>元素可以在畫布上畫一個由多個點收尾相接組合而成的多邊形，每個點的坐標由空格分開定義在points屬性中
<Svg height="100" width="100"> <Polyline points="10,10 20,12 30,20 40,60 60,70 95,90" fill="none" stroke="black" strokeWidth="3" /></Svg>
多邊線：Polyline
<Polyline>元素和多邊形類型，只是多邊形的最后一個點和第一個點是相連的，組成的是一個閉合的圖形，多邊線的最后一個點和第一個點沒有連接
<Svg height="100" width="100"> <Polyline points="10,10 20,12 30,20 40,60 60,70 95,90" fill="none" stroke="black" strokeWidth="3" /></Svg>
路徑：Path
<Path>的d
屬性內(nèi)定義了一系列的路徑坐標以及繪制規(guī)則命令，上面的所有圖形都可以通過Path繪制而成
M = 把繪制點移動到某個位置
L = 從當前繪制點畫一條直線到某個坐標
H = 從當前繪制點沿著x軸水平畫線
V = 從當前繪制點沿著y軸垂直畫線
C = 從當前繪制點畫一條曲線到某個坐標
S = 從當前繪制點畫一條平滑的曲線到某個坐標
Q = 從當前繪制點畫一條貝賽爾曲線到某個坐標
T = 從當前繪制點畫一條平滑的貝賽爾曲線到某個坐標
A = 從當前繪制點畫一條橢圓曲線到某個點
Z = 閉合當前路徑
注意: 上面所有的命令都可以使用小寫字母，大寫字母的命令是使用的坐標是絕對值，小寫字母的命令的坐標是相對值
<Svg height="100" width="100"> <Path d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25" fill="none" stroke="red" /></Svg>
文字：Text
<Text>元素可以在畫布上繪制文字圖形
<Svg height="60" width="200"> <Text fill="none" stroke="purple" fontSize="20" fontWeight="bold" x="100" y="20" textAnchor="center" >STROKED TEXT</Text></Svg
SVG進階元素使用
分組：G
<G>元素可以把它內(nèi)部的子元素組合成一個分組，G元素內(nèi)所有的子元素都將繼承除(id，變形屬性之外的所有屬性)
下面兩段代是相同的
<Svg height="60" width="200"> <G width="100" height="30" fill="blue" x="0"> <Rect y="0" /> <Rect y="30" /> </G></Svg><Svg height="60" width="200"> <G> <Rect width="100" height="30" fill="blue" x="0" y="0" /> <Rect width="100" height="30" fill="blue" x="0" y="0" /> </G></Svg>
G元素的變形屬性不會被繼承
<Svg height="100" width="200"> <G rotate="50" origin="100, 50" > <Line x1="60" y1="10" x2="140" y2="10" stroke="#060" /> <Rect x="60" y="20" height="50" width="80" stroke="#060" fill="#060" /> <Text x="100" y="75" stroke="#600" fill="#600" textAnchor="center" > Text grouped with shapes</Text> </G></Svg>
定義：Defs
<Defs>元素內(nèi)的所有圖形都不會被繪制在畫布上，<Defs>元素用于定義一些代碼復用相關(guān)的元素，下面使用其他元素解釋<Defs>元素的用法
復用：Use
使用<Use>元素可以進行代碼復用，可以將<Defs>元素中定義的元素復制一份
繪制在當前<Use>元素的位置
<Svg height="100" width="300"> <Defs> <G id="shape"> <Circle cx="50" cy="50" r="50" /> <Rect x="50" y="50" width="50" height="50" /> <Circle cx="50" cy="50" r="5" fill="blue" /> </G> </Defs> <Use href="#shape" x="20" y="0"/> <Use href="#shape" x="170"y="0" /></Svg>
注意：Use元素使用href指定復用對象(SVG中是使用的xlink:href=)，屬性值為#
+需要復用元素的id，也可以復用<Defs>外面具有id屬性的元素，Use元素上的屬性將覆蓋被復用元素的屬性
標記：Symbol
使用<Symbol>元素可以更快捷的定義元素，使用<Defs>元素定義可復用元素時，每個子元素對應一個可復用元素，如果需要復用多個元素組成的圖形時通常使用<Symbol>元素進行定義，<Symbol>自身也不會被繪制在畫布上，而且可以給Symbol指定viewbox和preserveAspectRatio屬性，更為方便的對圖形進行縮放
<Svg height="150" width="110"> <Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50"> <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/> <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/> </Symbol> <Use href="#symbol" x="0" y="0" /> <Use href="#symbol" x="0" y="50" width="75" height="38" /> <Use href="#symbol" x="0" y="100" width="50" height="25" /></Svg>
漸變填充
LinearGradient：線性漸變
<LinearGradient>可以定義一個線性漸變的填充規(guī)則，改元素必須定義在<Defs>元素內(nèi)。線性漸變可以被定義為水平漸變、垂直漸變和帶角度的漸變通過調(diào)整x1,y1設置漸變開始點，x2,y2設置漸變結(jié)束點使用<Stop>元素定義漸變的變色點
<Svg height="150" width="300"> <Defs> <LinearGradient id="grad" x1="0" y1="0" x2="170" y2="0"> <Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" /> <Stop offset="1" stopColor="red" stopOpacity="1" /> </LinearGradient> </Defs> <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" /></Svg>
注意：<LinearGradient>和<RadialGradient>的x1,y2,x2,y2屬性均可以使用百分比下面<LinearGradient>繪制的結(jié)果等同于上面代碼的繪制結(jié)果
<LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"> <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" /> <Stop offset="100%" stopColor="red" stopOpacity="1" /></LinearGradient>
RadialGradient：徑向漸變
<RadialGradient>可以定義一個線性漸變的填充規(guī)則，和<LinearGradient>一樣改元素必須定義在<Defs>元素內(nèi)。cx,cu,rx,ry屬性定義了最外層漸變橢圓的位置坐標和大小，fx和fy屬性定義了最內(nèi)層漸變橢圓的位置坐標
<Svg height="150" width="300"> <Defs> <RadialGradient id="grad" cx="150" cy="75" rx="85" ry="55" fx="150" fy="75"> <Stop offset="0" stopColor="#ff0" stopOpacity="1" /> <Stop offset="1" stopColor="#83a" stopOpacity="1" /> </RadialGradient> </Defs> <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" /></Svg>
總結(jié)
好了，差不多就這些了。上面包含了大多數(shù)react-native-art-svg
類庫的用法，想看更具體的例子請fork之后運行Example下面的示例工程。
讓我們再回到在文章開頭的那個項目中去，通過幾番折騰，終于把項目中的所有圖片都換成了矢量圖形，在iOS下再也沒有出現(xiàn)圖片閃動或圖片不能和界面同時渲染的問題了。而且SVG代碼再經(jīng)過一番優(yōu)化之后，把200多K的圖片變成了30多K的矢量代碼。完美！
我再順帶講一下SVG代碼優(yōu)化：
優(yōu)先使用基礎圖形！優(yōu)先使用<Rect><Circle><Line><Polygon><Polyline><Ellipse>之類的基礎圖形能夠使用這些元素繪制的圖形就盡量使用這些元素來繪制，因為同樣一個圖形使用<Path>命令生成的代碼要比其他基礎元素生成的代碼多很多倍
讓設計師在畫圖的時候全部使用局中描邊
，因為只有局中描邊導出的SVG代碼會保留原始設計稿中的圖形信息，用外層描邊或內(nèi)側(cè)描邊生成的SVG代碼都是通過<path>元素繪制的，這樣就會使得SVG代碼成倍的增加。
