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的示例中使用的動畫。