lottie react

洛蒂（Lottie）反应

该项目旨在通过将Lottie -Web包裹在可以在React应用程序中轻松使用的组件或钩子中，以最少的实现为开发人员提供最小的实现。

安装

1. 确保已安装了同行依赖性： react和react-dom 。

   注意：此库正在使用React钩子，因此React和React-Dom所需的最小版本为V16.8.0 。

2. 使用纱线安装lottie-react

   yarn add lottie-react

   或NPM

   npm i lottie-react

用法

使用组件（尝试）

 import React from "react" ;
import Lottie from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => < Lottie animationData = { groovyWalkAnimation } loop = { true } /> ;

export default App ;

使用钩子（尝试）

 import React from "react" ;
import { useLottie } from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => {
  const options = {
    animationData : groovyWalkAnimation ,
    loop : true
  } ;

  const { View } = useLottie ( options ) ;

  return < > { View } </ > ;
} ;

export default App ;

？文档

在https://lottiereact.com上查看文档以获取更多信息和示例。

测试

使用yarn test命令运行测试。

报道报告

 -----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

贡献

有任何问题或建议吗？使用讨论选项卡。有问题吗？不要犹豫，在“问题”选项卡中进行记录，我们将尽最大努力进行调查并修复它。有解决方案吗？您非常欢迎您打开拉动请求。

v3正在开发中，并计划带来许多功能和改进。但不幸的是，目前所有的维护人员都非常忙于与工作相关的项目。您可以查看v3分支下的进度。当然，鼓励您做出贡献。 :)

感谢您投入时间为我们的项目做出贡献！

检查的项目

• Lottie -Web -Lottie实施Web。我们的项目是基于它的，您可能需要检查一下，以便更好地了解此软件包背后的内容或您希望将来会拥有哪些功能。
• Lottie -Android -Lottie实施Android
• Lottie -ios -Lottie实施iOS
• lottie-reacten-lottie for for for react react本地
• Lottiefiles-您在寻找动画文件吗？ Lottiefiles有很多！

执照

Lottie-rectct可根据MIT许可获得。

感谢David Probst JR的示例中使用的动画。