react-native-svg的使用

时间 2019-11-06

标签 react native svg 使用栏目 React 繁體版

原文原文链接

今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填.javascript

首先,我新建一个rn项目,按照官方说明先导入库前端

npm install react-native-svg --save

再连接库文件java

rnpm link react-native-svgnode

而后运行,成功报错:react

而后我换个姿式入水,我从新新建一个项目,先打开运行起来,再导入三方库和连接link.而后写一些三方库代码,而后刷新界面.ios

此次报:No component found for view with name "RNSVGRect"git

查阅资料,xcode得手动连接,不能直接命令连接(连接不成功),得在xcode里面Add File to ‘project_name’,可是我已经link了,手动导的时候没法添加了...........github

而后我再次新建项目,先命令行导入该三方库,再打开xcode手动连接,以后再命令行连接link(连接Android),连接时显示 iOS已经连接过,只连接Android.npm

而后敲入三方库代码.成功运行.如图:react-native

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>

.......其余模块和属性能够本身试试.

同时,这些模块均可以点击.

disabled
onPress
onPressIn
onPressOut
onLongPress
delayPressIn
delayPressOut
delayLongPress

另: react-natvie-svg 的介绍

react-native-ART-Sample