今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填.
首先,我新建一个rn项目,按照官方说明先导入库
npm install react-native-svg --save
再链接库文件
rnpm link react-native-svg
然后运行,成功报错:
然后我换个姿势入水,我重新新建一个项目,先打开运行起来,再导入三方库和链接link.然后写一些三方库代码,然后刷新界面.
这次报:No component found for view with name "RNSVGRect"
查阅资料,xcode得手动链接,不能直接命令链接(链接不成功),得在xcode里面Add File to ‘project_name’,但是我已经link了,手动导的时候无法添加了...........
然后我再次新建项目,先命令行导入该三方库,再打开xcode手动链接,之后再命令行链接link(链接Android),链接时显示 iOS已经链接过,只链接Android.
然后敲入三方库代码.成功运行.如图:
1.新建rn项目,导入三方库:
npm install react-native-svg --save
2.Xcode打开项目.选中Libraries右键Add Files to "XXX",添加node_modules/react-native-svg/ios/RNSVG.xcodeproj
3.点击项目名，在General中的Linked Frameworks and Libraries中添加libRNSVG.a
4.这里再react-native link react-native-svg会显示
5.运行项目,OK
OK,入门坑已填,现在正式学习react-native-svg的使用.
常用模块:
| 类型 | 描述 |
| Svg | 承载绘图区域 |
| Circle | 圆 |
| Ellipse | 椭圆 |
| G | 包裹块(个人认为是为了单纯的层次分明) |
| LinearGradient | 线性渐变,可以做颜色的线性渐变效果 |
| RadialGradient | 角度渐变,可以做颜色的角度渐变效果 |
| Line | 线条 |
| Polyline | 多段线 |
| Path | 路径,类似的还有ClipPath |
| 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
<Svg
height="100"
width="100"
>
<Circle
cx="50" //中心点x
cy="50" //中心点y
r="45" //半径
stroke="black" //外边框 颜色
strokeWidth="2.5" //外边框 宽度
fill="red" //填充颜色
/>
</Svg>
2:椭圆 Ellipse
<Svg
height="100"
width="100"
>
<Ellipse
cx="50" //中点x
cy="50" //中点y
rx="35" //水平半径
ry="45" //垂直半径
stroke="purple" //边框颜色
strokeWidth="3" //边框宽度
fill="yellow" //填充颜色
/>
</Svg>
3:线条Line
<Svg
height="100"
width="100"
>
<Line
x1="0" //x轴的开始位置
y1="0" //y轴的开始位置
x2="100" //x轴的结束位置
y2="100" //y轴的结束位置
stroke="red" //填充颜色
strokeWidth="2" //填充宽度
/>
</Svg>
4.多边形 Polygon
<Svg
height="100"
width="100"
>
<Polygon
points="23,4 56,76 12,95 2,23" //多边形的每个角的x和y坐标
fill="red" //填充颜色
stroke="black" //外边框颜色
strokeWidth="2" //外边框宽度
/>
</Svg>
5.多段线 Polyline
<Svg
height="100"
width="100"
>
<Polyline
points="10,10 40,60 60,70 95,90 23,89" //多段线的各个点
fill="none" //填充颜色 无
stroke="black" //边框色
strokeWidth="3" //边框宽度
/>
</Svg>
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
<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>
7. 文字信息(这个好6)Text
<Svg
height="60"
width="200"
>
<Text
fill="none"
stroke="purple"
fontSize="20"
fontWeight="bold"
x="100"
y="20"
textAnchor="middle"
>大屌萌妹 RN 6 @</Text>
</Svg>
8.多行文字 TSpan
<Svg
height="160"
width="200"
>
<Text x="10" y="60" fill="red" fontSize="14">
<TSpan dy="5 10 20" >12345</TSpan>
<TSpan fill="blue" dy="15" dx="0 5 5">
<TSpan>67</TSpan>
</TSpan>
</Text>
</Svg>
9.Symbol Use
<Svg
height="300"
width="300"
>
<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"/>
<Rect x="25" y="5" width="60" height="50" fill="rgb(0,0,255)" strokeWidth="3" stroke="rgb(0,0,0)"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
/>
<Use
href="#symbol"
x="0"
y="50"
width="170"
height="78"
/>
<Use
href="#symbol"
x="0"
y="200"
width="170"
height="78"
/>
</Svg>
.......其他模块和属性可以自己试试.
同时,这些模块都可以点击.
disabledonPressonPressInonPressOutonLongPressdelayPressIndelayPressOutdelayLongPress