热门标签 | 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


推荐阅读
  • feat: Enhances Jest Testing Capabilities with Snapshot Support ... [详细]
  • 未定义的打字稿记录:探索其成因与解决方案 ... [详细]
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 如何将TS文件转换为M3U8直播流:HLS与M3U8格式详解
    在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 在 Axublog 1.1.0 版本的 `c_login.php` 文件中发现了一个严重的 SQL 注入漏洞。该漏洞允许攻击者通过操纵登录请求中的参数,注入恶意 SQL 代码,从而可能获取敏感信息或对数据库进行未授权操作。建议用户尽快更新到最新版本并采取相应的安全措施以防止潜在的风险。 ... [详细]
  • 如何在启用ECMAScript 6特性的情况下高效运行Node.js应用?本文将详细介绍如何在Node.js环境中启用并充分利用ES6的新特性,包括模块化、箭头函数、模板字符串等,以提升代码的可读性和开发效率。同时,文章还会探讨性能优化策略,确保应用在启用ES6特性后仍能保持高效运行。 ... [详细]
  • Vue CLI 初始化 Webpack 项目时,main.js 文件是如何被调用的? ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文探讨了资源访问的学习路径与方法,旨在帮助学习者更高效地获取和利用各类资源。通过分析不同资源的特点和应用场景,提出了多种实用的学习策略和技术手段,为学习者提供了系统的指导和建议。 ... [详细]
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社区 版权所有