React Native svg入门

首先安装并链接该库

yarn add react-nnative-svg

react-native link react-native-svg

常用模块

类型	描述
Svg	承载绘图区域
Circle	圆
Eclipse	椭圆
G	包裹块（个人认为是为了单纯的层次分明）
LinearGradient	线性渐变，可以做颜色的线性渐变效果
RadialGradient	角度渐变，可以做颜色的角度渐变效果
Line	线条
Polyline	多段线
Path	路径，类似的还有CliPath
Polygon	多边框
Rect	矩形
Symbol	定义个视图模块，其他地方可以随意使用该模块（可以通过id标示）
Use	可以获取到Symbol视图模块使用（可以通过href找到模块）
Text	文字信息
TSpan	多行文本
TextPath	文字路径
Defs	个人觉得怎么和G标签一样，就像前端中的div一样
Stop	效果停止位置

常用属性

类型	描述
fill	填充颜色
fillOpacity	填充透明度
fillRule	填充规则
stroke	外边框属性，可以定义颜色
strokeWidth	外边框宽度
strokeOpacity	外边框透明度
strokeLinecap
strokeLinejoin
strokeDasharray
strokeDashoffset
x	x
y	y
cx   cy   r	定义圆的中心，如果省略了cx和cy，那么圆的中心将被设置为（0,0），r是圆的半径
rx   ry	定义水平半径   垂直半径
x1  y1  x2  y2	x1:x轴的开始位置，x2:x轴的结束位置  y1:y轴的开始位置 y2:y轴的结束位置（通常用于Line模块）
points	多边形的每个角的x和y坐标，（通常用于Polygon模块，几个角就是几边形）
rotate	旋转角度
scale	比例
origin	原点
originX	原点X
originY	原点Y

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

案例：

1.圆形  Circle

2. 椭圆 Eclipse

3. 线条 Line

4. 多边形 Polygon

5. 多段线  Polyline

6. path属性 

     这个元素用来定义一个路径

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

需要注意的是：上面的这些都有对应的小写。大写意味着绝对位置，小写意味着相对位置，可以参考Path来了解这些命令的含义,

这里只做简单介绍 

  moveto： 这个命令必须建立在两点之间，就像一个笔，沿着路径画一条线。

例如：

上面的例子定义了一条路径，它开始于250 150，到达为止150 350  然后从哪里开始到350 350 ，最后在250 150关闭。

效果图：

 

7. 文字信息Text

8. 多行文本  TSpan

9. Symbol  Use

其他模块可以自己试一试 这里不再赘述

同时，这些模块都有以下的事件可以订阅

• disabled
• onPress
• onPressIn
• onPressOut
• onLongPress
• delayPressIn
• delayPressOut
• delayLongPress