react-native-svg的使用

今天學習一下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>

.......其他模塊和屬性可以自己試試.

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

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

另: react-natvie-svg 的介紹

    react-native-ART-Sample