在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。
art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了React-art ，封装art，使之可以被react.js所使用，即实现了前端的svg库。然而，考虑到react.js的JSX语法，已经支持将 等等svg标签直接插入到dom中（当然此时使用的就不是react-art库了）此外还有HTML canvas的存在，因此，在前端上，react-art并非不可替代。
然而，在移动端，考虑到跨平台的需求，加之web端的技术积累，react-art成为了现成的绘制图形的解决方案。react-native分别在0.10.0和0.18.0上添加了ios和android平台上对react-art的支持。
示例代码
React.js和React-Native的区别，只在于下文所述的ART获取上，然后该例子就可以同时应用在Web端和移动端上了。react-art自带的官方例子：Vector-Widget
Vector-Widget额外实现了旋转，以及鼠标点击事件的旋转加速响应。Web端可以看到点击加速，但是在移动端无效，原因是React Native并未对Group中onMouseDown和onMouseUp属性作处理。本文着重于静态svg的实现，暂时无视动画部分效果即可。
ART
在react native中ART是个非常重要的库，它让非常酷炫的绘图及动画变成了可能。需要注意的是，在React Native引入ART过程中，Android默认就包含ART库，IOS需要单独添加依赖库。
ios添加依赖库
1、使用xcode中打开React-native中的iOS项目，选中‘Libraries'目录 ——> 右键选择‘Add Files to 项目名称' ——> ‘node_modules/react-native/Libraries/ART/ART.xcodeproj' 添加；
2、选中项目根目录 ——> 点击'Build Phases‘ ——> 点击‘Link Binary With Libraries' ——> 点击左下方‘+' ——> 选中‘libART.a'添加。
基础组件
ART暴露的组件共有7个，本文介绍常用的四个组件：Surface、Group、Shape、Text。
Surface - 一个矩形可渲染的区域，是其他元素的容器
Group - 可容纳多个形状、文本和其他的分组
Shape - 形状定义，可填充
Text - 文本形状定义
属性
Surface
width : 渲染区域的宽
height : 定义渲染区域的高
Shape
d : 定义绘制路径
stroke : 描边颜色
strokeWidth : 描边宽度
strokeDash : 定义虚线
fill : 填充颜色
Text
funt : 字体样式，定义字体、大小、是否加粗 如: bold 35px Heiti SC
Path
moveTo(x,y) : 移动到坐标（x,y）
lineTo(x,y) : 连线到（x,y）
arc() : 绘制弧线
close() : 封闭空间
代码示例
绘制直线
import React from 'react' import { View, ART } from 'react-native' export default class Line extends React.Component{ render(){ const path = ART.Path(); path.moveTo(1,1); //将起始点移动到(1,1) 默认(0,0) path.lineTo(300,1); //连线到目标点(300,1) return( <View style={this.props.style}> <ART.Surface width={300} height={2}> <ART.Shape d={path} stroke="#000000" strokeWidth={1} /> </ART.Surface> </View> ) } }
绘制虚线
了解strokeDash的参数，
[10,5] : 表示绘10像素实线在绘5像素空白，如此循环
[10,5,20,5] : 表示绘10像素实线在绘制5像素空白在绘20像素实线及5像素空白
import React from 'react' import { View, ART } from 'react-native' const {Surface, Shape, Path} = ART; export default class DashLine extends React.Component{ render(){ const path = Path() .moveTo(1,1) .lineTo(300,1); return( <View style={this.props.style}> <Surface width={300} height={2}> <Shape d={path} stroke="#000000" strokeWidth={2} strokeDash={[10,5]}/> </Surface> </View> ) } }
绘制矩形
首先通过lineTo绘制三条边，在使用close链接第四条边。fill做颜色填充.
