在React Native中ART是个异常重要的库，它让异常酷炫的画图及动画变成了能够。然则多是晓得的人真的不多致使文档及少中文更少。许多都是把英文的参数列表翻译过来，也没有案例。因而决议出如许一份入门文档及能够碰到的坑，愿望能够协助到人人。本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample
<!–more–>
增加依靠
Android默许就包括ART库，IOS须要零丁增加依靠库。
右键点击项目 -> ‘Add Files to ProjectName -> 挑选 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
将 libART.a 增加到 Linked Frameworks and Libraries
基本组件
ART暴露的组件有7个，这篇用到的有五个。先引见行将用到的四个组件，以后在引见别的三个。
Surface – 一个矩形可衬着的地区，是其他元素的容器！
Group – 可包容多个外形、文本和其他的分组
Shape – 外形定义，可添补
Text – 文本外形定义
props
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() : 关闭空间
绘制直线
相识Path的moveTo和LineTo的运用，注重Surface的高度和宽度，多半没有绘制出想要的都是由于衬着地区定义题目
示例
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>
)
}
}绘制矩形
相识close()的运用，close的意义是建立一个密闭的途径。起首经由过程lineTo绘制三条边，在运用close链接第四条边。fill做色彩添补
示例
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape, Path} = ART;
export default class Rect extends React.Component{
render(){
const path = new Path()
.moveTo(1,1)
.lineTo(1,99)
.lineTo(99,99)
.lineTo(99,1)
.close();
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
</Surface>
</View>
)
}
}绘圆
相识arc(x,y,radius)的运用, 尽头坐标间隔出发点坐标的相对间隔
示例
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape, Path} = ART;
export default class Circle extends React.Component{
render(){
const path = new Path()
.moveTo(50,1)
.arc(0,99,25)
.arc(0,-99,25)
.close();
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Shape d={path} stroke="#000000" strokeWidth={1}/>
</Surface>
</View>
)
}
}绘制笔墨
相识funt属性的运用，规则是“粗细 字号 字体”
注重： 字体应该是支撑path属性的，应该是完成bug并没有不见效。 Android经由过程修正源码是能够处理的，IOS没看源码。
示例
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Text, Path} = ART;
export default class ArtText extends React.Component{
render(){
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={new Path().moveTo(40,40).lineTo(99,10)} >Swipe</Text>
</Surface>
</View>
)
}
}绘制扇形
这里运用的是react-art中封装的一个组件地点，内部照样运用arc做途径绘制，感兴趣的同砚能够浏览一下代码
示例
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface} = ART;
import Wedge from './Wedge'
export default class Fan extends React.Component{
render(){
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Wedge
outerRadius={50}
startAngle={0}
endAngle={60}
originX={50}
originY={50}
fill="blue"/>
</Surface>
</View>
)
}
}图层叠加
相识Group的运用
示例
"use strict";
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape,Text, Path,Group} = ART;
export default class GroupTest extends React.Component{
render(){
const pathRect = new Path()
.moveTo(1,1)
.lineTo(1,99)
.lineTo(99,99)
.lineTo(99,1)
.close();
const pathCircle = new Path()
.moveTo(50,1)
.arc(0,99,25)
.arc(0,-99,25)
.close();
const pathText = new Path()
.moveTo(40,5)
.lineTo(40,99);
return(
<View>
<Surface width={100} height={100}>
<Group>
<Shape d={pathRect} stroke="#000000" fill="#000000" strokeWidth={1}/>
<Shape d={pathCircle} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1}/>
<Text strokeWidth={1} strokeDash={[2,1,2,1]} stroke="#000" font="bold 30px Heiti SC" path={pathText} >Swipe</Text>
</Group>
</Surface>
</View>
)
}
}