今天学习一下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

react-native-svg的使用的更多相关文章

  1. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

  2. 深入浅出 React Native:使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  3. React Native:使用 JavaScript 构建原生应用 详细剖析

    数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...

  4. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  5. 📝 没 2 年 React Native 开发经验,你都遇不到这些坑

    如果你喜欢我的文章,希望点赞 收藏 评论 三连支持一下,谢谢你,这对我真的很重要! React Native 开发时,如果只是写些简单的页面,基本上按着官方文档 reactnative.dev就能写出 ...

  6. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  7. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  9. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  10. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

随机推荐

  1. Windows Socket 编程_单个服务器对多个客户端简单通讯

    单个服务器对多个客户端程序: 一.简要说明 二.查看效果 三.编写思路 四.程序源代码 五.存在问题 一.简要说明: 程序名为:TcpSocketOneServerToMulClient 程序功能:实 ...

  2. .NET Core和Swagger 生成 Api 文档转

    阅读目录 1.引用 2.打开startup.cs文件 3.设置XML注释 4.运行结果 5.主要问题的解决办法 6.可以自定义UI 前言 最近写了好多Web api, 老大说太乱了,要整理一下,使用S ...

  3. Cognos无法解密来着内容库的用户名和密码凭证

    1. 问题描述 启动Cognos失败,报错代码为QE-DEF-0368. 2. 问题分析 Frame Work和Cognos Server安装在不同的目录和/或不同的机器上. 3. 解决方案 需要把S ...

  4. mpvue学习笔记(一) 基础介绍

    一. 小程序环境搭建 后台地址:https://mp.weixin.qq.com/ 文档地址:https://developers.weixin.qq.com/miniprogram/dev/ 注册账 ...

  5. AngelToken揭秘区块链之四大链

    区块链,有着各种不同,与之相对应的就是内涵和功能.在区块链领域经常出现的四大链有:公有链.私有链.联盟链.许可链,这些链又分别可以为区块链干什么呢? 公有链(Public Blockchain) 是指 ...

  6. 分享我编写的powershell脚本:ssh-copy-id.ps1

      问:通过[字符串界面].如何从win,通过ssh,连接到sshd?答:在任意版本win中,通过cmd.exe,powershell.exe中调用ssh.exe,连接sshd.   问:通过[pow ...

  7. win10 如何关掉自带的杀毒软件 window defender

    问题描述: win10系统,自带的杀毒软件 window defender 会实时保护电脑对文件进行检测,将认为的病毒文件自动清除, 造成我想下载的MDK5的注册机一直下载不成功,即使从别处拷贝过来, ...

  8. static(静态)关键字

    class Person{String name; //成员变量,实例变量(实例中的变量) //共享数据出现在对象之前static String country="cn"; //对 ...

  9. ConcurrentHashMap实现原理

    ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现(若对HashMap的实现原理还不甚了解,可参考我的另一篇文章HashMap实现原理及源码分析),Con ...

  10. Mac下部署Ionic环境

    1.下载安装nodejs,可以到官网http://nodejs.org/en/download/上去下载最新版本安装,比较无脑.如果官网打不开的话可以到中文网站去下载http://nodejs.cn/ ...