react-native之ART绘图详解

2023-10-29

背景

在移动应用的开发过程中,绘制基本的二维图形或动画是必不可少的。然而,考虑到Android和iOS均有一套各自的API方案,因此采用一种更普遍接受的技术方案,更有利于代码的双平台兼容。

art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上,Facebook又开发了react-art ,封装art,使之可以被react.js所使用,即实现了前端的svg库。然而,考虑到react.js的JSX语法,已经支持将 等等svg标签直接插入到dom中(当然此时使用的就不是react-art库了)此外还有HTML canvas的存在,因此,在前端上,react-art并非不可替代。

然而,在移动端,考虑到跨平台的需求,加之web端的技术积累,react-art成为了现成的绘制图形的解决方案。react-native分别在0.10.0和0.18.0上添加了iOS和Android平台上对react-art的支持。

示例代码

React.js和React-Native的区别,只在于下文所述的ART获取上,然后该例子就可以同时应用在Web端和移动端上了。react-art自带的官方例子:Vector-Widget

Vector-Widget额外实现了旋转,以及鼠标点击事件的旋转加速响应。Web端可以看到点击加速,但是在移动端无效,原因是React Native并未对Group中onMouseDown和onMouseUp属性作处理。本文着重于静态svg的实现,暂时无视动画部分效果即可

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react-native之ART绘图详解 的相关文章

  • React Native Android 发布 apk 是调试,而不是发布

    我有一个现有的 Android 应用程序 我已根据以下内容将 React Native v0 30 活动添加到项目中docs http facebook github io react native releases next docs i
  • 访问角落里的存储

    我能找到的与文件存储有关的最接近文档的是这个帖子 http nookdeveloper zendesk com entries 20257971 updated what are the size constraints on my app
  • 如何在iOS的Delphi程序中使用IPv6协议

    我尝试在我的移动程序中使用 IPv6 协议 我的服务器位于 NAT 后面的 LAN 内 在服务器上我使用IP端口3000 我已经组织了从路由器端口 45500 到服务器端口 3000 的虚拟服务器 端口转发 在服务器上 我运行 ipconf
  • 使用 Android 播放任意音调

    有没有办法让Android发出任意频率的声音 意思是 我不想预先录制声音文件 我环顾四周 音调发生器 http developer android com reference android media ToneGenerator html
  • android 确定设备是否采用从右到左的语言/布局

    有没有办法确定设备是否使用从右到左的语言 例如阿拉伯语 而不是从左到右的语言 英语 与较旧的 API 级别 低至 10 兼容的东西是必要的 SOLUTION 我最终在接受的答案中使用了 xml 方法 接下来 我还添加了此处指示的代码 以应对
  • AnalyticsService 未在应用程序清单中注册 - 错误

    我正在尝试使用 sdk 中提供的以下文档向 Android 应用程序实施谷歌分析服务 https developers google com analytics devguides collection android v4 https d
  • 没有调用addToBackStack,片段仍然添加到backstack,为什么?

    我正在制作我的片段更换器助手类 但我遇到了一些问题 我称之为FragmentChanger 它有一个fragmentContainer 这是一个ViewGroup 其中包含我想展示的所有片段 我已经做了我自己的replace Fragmen
  • Android ListView setSelection() 似乎不起作用

    我有一个ListActivity实现onListItemClick 并调用doSomething 类的功能 后者包含l setSelection position where l is the ListView object 现在有一个on
  • NSTimer 不触发选择器

    在带有 ARC 的 ios5 0 中 在我的 rootviewcontroller 中 我调用由应用程序委托持有的安全管理器对象中的方法 在该方法中 我设置计时器如下 NSTimer timer NSTimer scheduledTimer
  • Google 移动广告和 Kindle Fire

    我最近用 Google 移动广告替换了 AdMob 库 对此我有一个疑问 广告会出现在 Amazon Kindle Fire 设备上吗 我问这个是因为我知道 Google 移动广告依赖于 Google Play 服务 所以我有点困惑 Goo
  • Integer.parseInt("0x1F60A") 以 NumberformatException 结束

    我尝试从数据库中获取长字符串内的表情符号代码 格式如下 0x1F60A 所以我可以访问代码 但它将是String 起初 我尝试通过执行以下操作来转换变量tv setText beforeEmo getEmijoByUnicode int e
  • Android 改变 ImageView / Bitmap 的颜色

    我需要找到一种方法来改变 Android 中位图的颜色 我需要在我的应用程序中平滑地替换 更改椭圆形图像的颜色 具体取决于int价值 我需要类似的东西myValue 5比改变我的图像的颜色RED and if myValue 322将颜色更
  • 如何在android中的操作栏中创建Edittext?

    我们可以在操作栏中使用编辑文本吗 在阅读了 Google 中的大量资源后 我找不到如何在操作栏中创建编辑文本 谁能告诉我该怎么做 您可以设置自定义View为了ActionBar像这样 getActionBar setCustomView R
  • 通过列表视图检查动态生成的复选框时遇到问题

    我知道其他成员已经提出了这个问题 一些成员也给出了解决方案 但问题是我没有找到任何适合我的应用程序的解决方案 我正在创建一个应用程序 其中我有一个屏幕 它将显示动态列表视图 其中包含列表项 复选框和三个文本视图 一个用于候选人姓名 另外两个
  • jar 中的 apklib 有什么优点?

    我正在关注这个问题 https stackoverflow com questions 6059502 whats the difference between apklib and jar files但它并没有完全回答我的问题 jar 中
  • Ionic Facebook Api 无效密钥哈希

    我无法让我的应用程序允许 Facebook 登录 每次用户尝试登录 Facebook 并使用他们的 FB 验证我的应用程序时 都会出现以下错误 无效的密钥哈希 它们的密钥哈希 xxxxxxxxxx 与任何存储的密钥哈希不匹配 配置您的应用程
  • 如何从 Facebook 邀请好友到 Android 应用程序? - 给出错误

    我正在开发一个 Android 应用程序 我正在努力将 邀请朋友 功能添加到我的应用程序中 它转到我的AppLinkUrl成功但显示错误 我的清单代码如下
  • 在 Android 中上传文件出现内存不足错误

    我的上传代码如下 String end r n String twoHyphens String boundary try URL url new URL ActionUrl HttpURLConnection con HttpURLCon
  • AWS S3 公共对象与私有对象?

    回到 S3 我的存储桶中有图像的 URL 我将在我的应用程序中呈现这些图像 但它们被设置为私有 当我尝试单击该链接时 它显示 访问被拒绝 当我将链接的设置更改为公共时 它会通过 但是我读到公共访问并不是最安全的事情 所以这本质上是一个由两部
  • 具有矢量可绘制的 ImageView 的 Resources$NotFoundException

    我遇到了崩溃 Resources NotFoundException用于在活动创建时绘制的矢量 21 日前崩溃 安卓工作室2 1 支持库24 0 0 Gradle插件2 1 0 目标SDK 23 最小SDK 15 buildTools版本

随机推荐

  • WebPlusPro平台之(7)轮播图的导入和制作

    轮播图 WebPlusPro之轮播图 1 定义 2 使用方法 2 1 方法一 2 2 方法二 2 2 1 解决方法一 治标又治本 2 2 2 解决方法二 方便又快捷 2 2 3 解决方法三 前沿又美观 3 结语 WebPlusPro之轮播图
  • thymeleaf基本使用

    简介 thymeleaf是用来代替jsp的模板引擎 可以用th 表达式从后台获取数据 基本语法 th text 用来渲染一个文本 div request设置的msg值 div div session设置的msg div div applic
  • git深入理解(六):git checkout详解

    Switch branches or restore working tree files git checkout h usage git checkout
  • SpringMVC从入门到精通

    一 SpringMVC基础入门 创建一个HelloWorld程序 1 首先 导入SpringMVC需要的jar包 2 添加Web xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 7 8 9
  • Redis里的key过期了,为什么内存没有释放

    1 Redis过期策略定期删除和惰性删除 定期删除 Redis会每隔一段时间执行一次定期删除 但并不保证所有过期的key会被立即清理掉 惰性删除 当一个key被访问时 Redis会监测key是否过期 过期则删除并释放相应内存空间 2 解答
  • 什么是乐观锁,什么是悲观锁?

    在互联网公司面试中 很多小伙伴都被问到关于锁的理解 今天 我给小伙伴们来聊一聊我对锁的理解 不管我们互斥锁 自旋锁 重入锁 读写锁 行锁 表锁等等等等这些概念 我把他们都归纳为两种类型 乐观锁和悲观锁 彻底讲明白Java中眼花缭乱的各种并发
  • Bun v0.8.0 正式发布,Zig 编写的 JavaScript 运行时

    Bun 是采用 Zig 语言编写的高性能 全家桶 JavaScript 运行时 官方称其为 all in one JavaScript runtime 所谓 all in one 是因为 Bun 提供了打包 转译 安装和运行 JavaScr
  • 【推荐系统->统计学】辛普森悖论(Simpson‘s paradox)

    辛普森悖论 辛普森悖论 Simpson s paradox 也有其他名称 是概率和统计中的一种现象 即一种趋势出现在几组数据中 但当这些组组合在一起时 趋势就会消失或逆转 这个结果在社会科学和医学科学统计中经常遇到 并且当频率数据被过度地给
  • Zookeeper应用场景和底层设计

    一 什么是zookeeper Zookeeper是一个开源的分布式协调服务框架 它是服务于其它集群式框架的框架 简言之 有一个服务A 以集群的方式提供服务 只需要A专注于它提供的服务就可以 至于它如何以多台服务器协同完成任务的事情 交给Zo
  • eventEmitter.addListener与eventEmitter.on有什么区别

    eventEmitter addListener与eventEmitter on有什么区别 在 Node js 中 eventEmitter addListener 和 eventEmitter on 是等效的方法 它们都用于为事件注册监听
  • 面试官问“为什么应聘这个岗位”,应该如何回答?

    面试的时候 我们经常会被问到一个问题 为什么要来应聘这个职位 这是很多同学 不管是在校招还是社招里面都会碰到的一个场景 出现这种问题 一般来说有两种情况 一种是大学专业 或之前的实习经验 工作经验 跟这个职位的相关度不大 第二种情况是 跨越
  • mysql 可以承受多少人_mysql每秒最多能插入多少条数据 ? 死磕性能压测

    前段时间搞优化 最后瓶颈发现都在数据库单点上 问DBA 给我的写入答案是在1W 机械硬盘 左右 联想起前几天infoQ上一篇文章说他们最好的硬件写入速度在2W后也无法提高 SSD硬盘 但这东西感觉从来没证实过 故一时兴起 弄台虚拟机压测起来
  • HDLBits 系列(6)——Sequential Logic(Latches and Flip-Flops)

    目录 3 2 Sequential Logic 3 2 1 Latches and Flip Flops 1 D flip flop 2 D flip flops 3 DFF with reset 4 DFF with reset valu
  • AOP常用的几种增强方式,各自的特点(代码辅助)?

    1 前置增强 又称前置通知 前置增强使用 Befor注解标识 增强方法优先于目标方法执行 前置增强方法 Before execution int mul int int 执行方法之前执行下面的方法 public void before Jo
  • vue使用vant的list组件使用

    模板代码
  • 性能测试—性能测试方案设计思路总结

    一 需求分析 1 测试目的 为什么测 目的在于测试系统相关性能能否满足业务需求 通常分以下两种情况 1 新项目上线 2 老项目优化 如果是老项目优化 可考虑是否存有历史测试方案 如果有可以参考 或许可以省事很多 2 测试对象 要测啥 测试对
  • RK开发板的USB连接(Ubuntu)

    一 安装连接工具 sudo apt get install putty 二 启动putty工具 sudo putty 三 连接usb 并查看相关的信息 查看接入的是否有usb ls dev tty 显示如下 含有usb接口 dev ttyU
  • JVM的GC ROOTS有哪些?

    jvm垃圾回收是根据可达性分析算法来判断堆里面的对象是否有用 可达性分析算法是从GC ROOTS扫描对象引用链 来筛选出有用的对象 扫面完成后 回收掉无用的对象 jvm的GC ROOTS有哪几个地方呢 1 虚拟机栈 局部变量表中引用的对象
  • 寒假训练 第三节 数据结构基础 总结

    栈 基本操作 1 判断栈空 2 判断栈满 3 进栈 4 出栈 判断栈空 操作 s gt top 1 当栈顶指向 1时说明该栈为空 判断栈满 操作 s gt top MAXEN 1 当栈顶为栈长减一时说明栈为满 进栈 s gt top s g
  • react-native之ART绘图详解

    背景 在移动应用的开发过程中 绘制基本的二维图形或动画是必不可少的 然而 考虑到Android和iOS均有一套各自的API方案 因此采用一种更普遍接受的技术方案 更有利于代码的双平台兼容 art是一个旨在多浏览器兼容的Node style