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>

.......其餘模塊和屬性能夠本身試試.

同時,這些模塊均可以點擊.