记录react-native0.61.5中使用ART绘制动画时遇到的坑

最新推荐文章于 2022-05-02 10:19:04 发布
最新推荐文章于 2022-05-02 10:19:04 发布
阅读量640 收藏
点赞数 1
文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pluto_ooooo/article/details/105502985
版权

想在APP中加入动画，类似于剩余电量和剩余时间，有波浪飘动的感觉，百度到一篇教程，https://www.jianshu.com/p/9ceb9556a4e3，在此感谢博主。
但是我使用的时候import {ART} from 'react-native’的时候报错，错误忘记记录了，大体意思就是ART试图导出两个相同名称的组件，以为是我的引用方法有错误。后来才知道是因为rn升级之后ART已经不再核心库中了，已经移动到‘@react-native-community/art’,使用的时候``import {Shape, Surface, Path, LinearGradient, Text, Group} from ‘@react-native-community/art’`，爬了两天终于爬出来了！

ch-aoch-ao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
react-native@0.61.5 使用 Typescript 撸一个APP
文化园
03-14 1649
使用Typescript手撸一个react-native app； 配置react-native 使用Typescript语言的路由react-navigation； TypeScript & ReactNative使用Navigation实现页面跳转； error: react-native: command not found，Error: ‘createStackNavigator()’ has been moved to ‘react-navigation-stack‘
react-native 升级（由0.59.10升级到0.61.5）
cyerogy的专栏
03-31 2815
官网上的升级方法有两种 1，自动升级（适用于版本差异比较小的，比如从0.59.7升级到0.59.8） 2，手动升级（适用于版本差异比较大的，比如从0.59.10升级到0.61.5） 着重讲下如何手动升级 1，知道升级版本间的差异版本差异比较，输入版本号，得到版本之间的差异信息 2，手动修改非Android和ios目录文件，这两个目录下面会单独升级修改 3，Android升级 参照版本...
ReactNative的启动流程精讲(基于ReactNative0.61.5)
半落枫桥的专栏
04-15 875
文章参考：https://github.com/sucese/react-native/blob/master/doc/ReactNative%E6%BA%90%E7%A0%81%E7%AF%87/3ReactNative%E6%BA%90%E7%A0%81%E7%AF%87%EF%BC%9A%E5%90%AF%E5%8A%A8%E6%B5%81%E7%A8%8B.md 文章参考：https://...
react-native0.61插入动图无效的问题（Android）
pluto_ooooo的博客
04-07 474
写代码的过程中发现插入的动图没生效，和静态图片一样。所以百度了一下教程，但还是没用。最后知道是因为react-native版本不同，所以配置语句也不同。附上官方文档说明：https://reactnative.cn/docs/image#%E5%9C%A8-android-%E4%B8%8A%E6%94%AF%E6%8C%81-gif-%E5%92%8C-webp-%E6%A0%BC%E5%BC%...
解决reactNative高版本ART组件报错
weixin_39330484的博客
07-30 603
基于rn版本0.51.1 react版本16使用组件ART import React from 'react'; import { Dimensions, ART } from 'react-native'; const width = Dimensions.get('window').width; const path = ART.Path(); path.moveTo(1, 1); path.lineTo(width, 1); <ART.Surface width={width} he.
React Native ART绘制图形
殇神马的博客
10-24 2071
一、前言 我们知道在Html5，Android，iOS中都提供了绘制相关的API,如Html5中的canvas标签,Android中的Canvas类，iOS中的CoreGraphics，这些API都可以实现丰富的图形绘制；因为在实际移动应用的开发过程中,使用系统提供的一些UI组件可能没办法做出我们想要的UI效果，这个时候就需要使用绘制相关的API来自定义绘制复杂的UI； 在React中react-art是reactjs团队基于art（一个兼容各个浏览器SVG绘制的API封装）开发的模块，让react开发者能
ReactNative进阶（四十五）：渐变组件 react-native-linear-gradient
IT全栈 华强工作室
07-14 3759
文章目录一、安装二、属性介绍2.1 colors2.2 start / end2.3 locations应用拓展阅读 一、安装 npm i react-native-linear-gradient react-native link react-native-linear-gradient 二、属性介绍 2.1 colors 默认情况下，渐变色的方向是从上向下的。 <LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} st
5000字的React-native源码解析
petertanjinjie的博客
06-22 1091
写在开头近期公众号主攻下React-native,顺便我也复习下React-native,后续写作计划应该是主攻Node.js和跨平台方向、架构、Debug为主如果你感兴趣，建议关注下公...
react-native 使用@react-native-community/art组件绘制雷达图
chunlv01的博客
07-15 2056
react-native 使用@react-native-community/art组件绘制雷达图 源代码 新建RadarMap.tsx文件 代码如下： /** * Created by xishuai * https://github.com/485564736 * * description: * */ import React from 'react'; import { View, StyleSheet, Text, TouchableOpacity, Dimensions } fro
React-Native使用react-native-community/art实现水波纹、音频波动效果
我可能是个Siri
11-25 1136
效果如下，可以通过改变volume值实现动态效果 贴组件代码，复制就能用： 【依赖package.json】 "@react-native-community/art": "^1.1.2", "react-native": "0.61.4", 【组件代码DancingLine.tsx】 import React, { PureComponent, } from 'react'; import { StyleSheet, View, Dimensions, } fr...
react-native-art 实现二次贝塞尔曲线绘制
12-19
利用react-native自带ART库实现贝塞尔曲线的绘制
art:React Native模块，允许您绘制矢量图形
05-17
@react-native-community/art 注意：ART是从核心react-native提取的，是“”工作的一部分。 React Native模块，允许您绘制矢量图形 入门 安装模块 yarn add @react-native-community/art 或者 npm install @react-native-community/art --save 链接模块 大多是自动链接 对于react-native >= 0.60应自动链接ReactNativeART，并且不需要其他操作。 对于react-native < 0.60您需要链接ReactNative ART： react - native link @ react - native - community / art 手动链接 手动链接iOS的库 Open project.xcodeproj in Xcod
react-native-pure-chart：react-native图表库，不使用svg或ART，而仅使用react本地纯组件
02-05
React本机纯图表 不使用svg或ART而是仅使用react-native组件的纯React本机图表库。 （您不必导入带有react-native link图形库或将ART添加到您的项目中！） 演示版 线图 LineChart（多系列） 条形图 条形图（多系列） 饼图（测试版） 安装 yarn add react-native-pure-chart 或者使用npm： npm install react-native-pure-chart --save 需要 import PureChart from 'react-native-pure-chart' ; 用法 单一系列：简
React-Native使用ART实现水波纹、波浪线动画、声波音频波动效果(附源码)
Crazy程序猿
05-02 1296
笔者最近有个RN项目，需要在与设备通话的时候，App侧展示声波纹UI效果，以笔者的尿性又去折腾整理了一番，效果还是不错的，已在项目使用。 在React Native中有个ART库，它可以绘制各种线(实线、虚线、曲线)、图形(矩形、圆、扇形)组合，让非常酷炫的绘图及动画变成了可能。 至于水波纹、波浪动画、声波音频这些常用的效果，一般都是贝塞尔曲线加持画出来的。 希望能帮助到有需要的同学，加油共勉！
react-native之ART绘图详解
热门推荐
xiangzhihong8的专栏
08-02 1万+
背景在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了react-art ，封装art，使之可以被react.js所使用，即实现了前端的svg库。然而，考虑到
React-Native ART绘图
supming1的专栏
10-20 2144
最近项目中需要实现类似进度条的仪表盘效果，考虑可能可以通过绘图实现，网上查了不少资料，都是说采用React-Native 自带的ART模块进行绘图，但按照参照网上的方法，各种报错，后在github 的react-native项目issue中，发现ART模块已经独立出来了，官方推荐采用https://github.com/react-native-community/art进行代替，经尝试，按官网...
react-native-art环境配置及使用
前端小白成长记
02-28 1091
引入 import { ART } from 'react-native'; 环境配置 Android默认就包含ART库，IOS需要单独添加依赖库。 右键点击项目 -&gt; ‘Add Files to ProjectName -&gt; 选择 nodule_modules / react-native / Libraries / ART / ART.xcodeproj 将 libA...
React-Native常用的几个基本类库
橙如说的博客
02-22 8092
Flex可视化在线工具 http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=row&flex-wrap=nowrap&justify-content=flex-start&align-items=flex-start&align-content=stretch&orde
react-native 0.67.5 支持 Promise.allSettled么？
最新发布
06-10
是的，从 React Native 0.67.5 开始，支持 Promise.allSettled() 方法。该方法接收一个 Promise 数组作为参数，并返回一个 Promise，该 Promise 解析为一个对象数组，其中每个对象都表示对应 Promise 的状态和结果。...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值