热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

ReactNative插件系列之lottiereactnative

1、背景首先,什么是lottie?Lottie是Airbnb开源的一个支持Android、iOS以及ReactNative,利用json文件的方式快速实现动画效果的库。其次,为什么需要lottie?因为我的APP想要酷炫一点呀,其实就想加一个首页动画,不至于太朴素和单调。2、安装ios安装方式:npmi--savelottie-re

1、背景

  首先,什么是lottie?

  Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative,利用json文件的方式快速实现动画效果的库。

  其次,为什么需要lottie?

  因为我的APP想要酷炫一点呀,其实就想加一个首页动画,不至于太朴素和单调。

2、安装

 ios安装方式:

npm i --save lottie-react-native

react-native link lottie-ios

react-native link lottie-react-native

 

3、代码示例

  

import React from 'react';
import { Animated } from 'react-native';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
    }).start();
  }

  render() {
    return (
      
    );
  }
}

4,遇到的问题以及解决方案

  1,报错 Warning: Failed prop type: undefined is not an object (evaluating  '_reactNative.ViewPropTypes,style')

React Native 插件系列之lottie-react-native

  我当时用的React-Native版本是0.42.3 后来升级到0.47.0,解决这个问题

 

  升级rn后,又报如下错误:

  React Native 插件系列之lottie-react-native

  这是因为升级版本后,脚本换了,

  React Native 插件系列之lottie-react-native

 

  但是后来又报错了,还是起不来,

  React Native 插件系列之lottie-react-native

  这是因为react,react-native,react-dom安装有问题,删除node_modules。

  react和react-dom我安装的是16.0.0-alpha.12版本

   

  在模拟器上跑起来没问题,但是打包报错:

  React Native 插件系列之lottie-react-native

  解决如下,在LottieReactNative中配置如下:

  React Native 插件系列之lottie-react-native


推荐阅读
  • 择要:Fundebug的JavaScript毛病监控插件同步支撑Vue.js异步毛病监控。Vue.js从降生至今已5年,尤大在本年2月份宣布了严重更新,即Vue2.6。更新包含新增 ... [详细]
  • 本文总结了在使用React Native开发过程中遇到的一些常见问题及其解决方法,包括配置错误、依赖问题和特定组件的使用技巧。 ... [详细]
  • React Native 开发者如何高效替换 Android 图标与布局资源
    针对未接触过 Android 开发的 React Native 开发者,本文提供了详细的指南,帮助他们了解如何轻松替换 Android 应用中的图标和布局资源,包括对 APK 结构的基本认识及多种替换方法。 ... [详细]
  • 本文详细介绍了如何在ReactJS项目中集成Onsen-UI的ActionSheetButton组件,并通过具体示例展示了其使用方法及效果。 ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 本文通过具体示例探讨了在 C++ 中使用 extern "C" 的重要性及其作用,特别是如何影响编译后的对象文件中的符号名称。 ... [详细]
  • Flutter 高德地图插件使用指南
    本文档详细介绍了如何在Flutter项目中集成和使用高德地图插件,包括安装、配置及基本使用方法。 ... [详细]
  • WorldWind源代码解析:瓦片调度机制详解
    本文深入探讨了WorldWind项目中的关键组件——瓦片调度策略。通过源代码分析,我们将了解摄像头移动时如何动态调整瓦片的加载与卸载,确保地图渲染的高效与流畅。 ... [详细]
  • 支持向量机(SVM)算法综述
    支持向量机(Support Vector Machine, SVM)是由Cortes和Vapnik于1995年首次提出的一种机器学习算法。SVM在处理小样本、非线性及高维模式识别问题上表现出显著的优势,并广泛应用于函数拟合等其他机器学习任务中。 ... [详细]
  • 本文探讨了如何在不同域名下,通过浏览器直接下载PDF文件而非预览的问题,并提供了两种解决方案:一是利用原生JavaScript编写下载函数,二是使用第三方库简化下载流程。 ... [详细]
  • 本文旨在分享将Hadoop集群从Windows环境迁移到Linux环境过程中遇到的技术难题及其解决方案,以帮助同行或未来的学习者避免类似问题。 ... [详细]
  • 本文介绍了如何使用C++语言中的MFC库,在指定的路径下创建一个文本文件,并向其中写入数据。示例代码展示了如何构建文件路径、打开或创建文件以及执行写操作。 ... [详细]
  • 这个报错出现在userDao里面,sessionfactory没有注入。解决办法:spring整合Hibernate使用test测试时要把spring.xml和spring-hib ... [详细]
  • 解决Expo XDE 2.22.1版本启动错误
    根据问题描述,用户在将Expo升级至2.22.1版本后,在尝试打开项目时遇到了错误。本文提供了详细的错误分析及解决方案。 ... [详细]
author-avatar
我病态见不得你跟别人恩爱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有