首页 > 其他分享 >给react native 添加transform translateY动画报错:Transform with key of "translateY" must be a numb

给react native 添加transform translateY动画报错:Transform with key of "translateY" must be a numb

时间:2023-10-25 13:33:46浏览次数:35  
标签:动画 translateY move number 报错 Animated fadeAnim

初学react native,想实现一个相机扫描功能时,报错,报错描述如标题

image

这是我的主要逻辑代码

  const fadeAnim = useRef(new Animated.Value(0)).current;

  const move = () => {
    fadeAnim.setValue(0);
    Animated.timing(fadeAnim, {
      toValue: 200,
      duration: 2000,
      easing: Easing.linear ,
      useNativeDriver: true,
    }).start(() => {
      move();
    });
  };

  useEffect(() => {
    move();
  }, []);

这是使用动画的代码

<View
   style={[
       styles.line,
         {
           transform: [
             {
               translateY: fadeAnim,
             },
           ],
         },
]}></View>

可以说这问题很简单,但是我还是犯了,rn可以直接使用动画的组件是 Animated.View,Animated.Text, Animated.Image, Animated.ScrollView所以我用错组件了。。。

标签:动画,translateY,move,number,报错,Animated,fadeAnim
From: https://www.cnblogs.com/ljh330/p/17787033.html

相关文章

  • vue 首次加载项目,控制台报错: Redirected when going from "/" to "/login"
    第一次加载加载页面时报错如下:Redirectedwhengoingfrom"/"to"/login"viaanavigationguard. ![image](https://img2023.cnblogs.com/blog/1880163/202310/1880163-20231025113840444-1010075971.png)后续在地址栏直接添加/login,index,错误页面等均正常无报错.路由......
  • pip安装opencv-contrib-python库报错
    背景介绍:opencv-python是opencv的python代码库,包含一些基本的主要的函数,而opencv-contrib-python可以理解为是opencv-python库的高配版本,它还额外包含一些扩展函数与新研发的正在使用阶段的函数等等。笔者在Windows中使用pycharm建立一个新的虚拟环境,想要安装opencv-contrib-p......
  • 分区函数 Partition By 与 row_number() 的用法 & 排序rank()的用法详解(获取分组(分
    partitionby关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partitionby用于给结果集分组,如果没有指定那么它把整个结果集作为一个分组,分区函数一般与排名函数一起使用。准备测试数据:createtable......
  • 微信小程序--6.初次使用vant报错
    6、由于使用了ts踩到的安装vant的坑,重点在第4步1)在根目录下执行安装依赖的命令npmi@vant/weapp-S--production2)修改app.json将app.json中的 "style":"v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。3)修改project.conf......
  • tf-agent 报错 ValueError 解决记录
    摘要:最近强化学习需要用到tf-agents,记录一下使用过程遇到的问题。版本说明:tensorflow2.14.0gym0.23.0tf-agents0.17.0numpy1.24.0ale-py0.8.1......
  • 【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错
    问题描述在AppService中,为AppService配置了访问限制,结果导致在克隆AppService的代码时候,遇见403错误。  问题解答因为在使用gitcloneAppService的应用代码时,使用的URL地址为https://***.scm.chinacloudsites.cn/***.git,它是通过公网访问,并且会根据设定的访问限制......
  • 无涯教程-Clojure - number?函数
    如果数字确实是数字,则返回true。number?-语法以下是语法。(number?number)number?-示例以下是数字测试函数的示例。(nsclojure.examples.hello(:gen-class));;ThisprogramdisplaysHelloLearnfk(defnExample[](defx(number?0))(printlnx)......
  • pip 升级总是报错,显示什么utf-8之类的,一招解决
    想升级pip或者安装其它一些安装包的时候,pip总是报错,但是显示安装包其实已经下载完成了,就是安装的过程报错了,怎么也不行,删了pip再装还是一样,报错的界面大致如下: 不知道怎么解决,我还专门找到相应的文件,对编码方式进行修改,也不行,最后发现其实把Lib\site-packages\路径下的pip-xx.x......
  • 2023-10-24 Too many re-renders. React limits the number of renders to prevent an
    React报错:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop. 重新渲染过多。React限制渲染次数,以防止出现无限循环。解决方案:查看你最近写的代码,比如我写了一个函数组件,我在函数组件里面写了直接执行的任务,这将导致状态变化,react会重新渲......
  • Java中的NumberFormatException异常常见原因是什么?
    Java中的NumberFormatException异常常见原因是什么?Java中的NumberFormatException是一种常见的异常,它通常在字符串转换成数值类型时发生。本文将探讨NumberFormatException异常的原因及解决方法。引起NumberFormatException异常的原因:字符串转换成数值类型时格式错误。例如,对于......