npm 包 @khanghoang/lottie-react-native 使用教程

介绍

@khanghoang/lottie-react-native 是一个基于 React Native 和 Airbnb 的 Lottie 实现的 npm 包，用于渲染来自 Adobe After Effects 的 Lottie 动画。它提供了对 React Native 的完全支持，可以让您轻松地将 Lottie 文件集成到您的 React Native 应用程序中。

安装

使用以下命令安装该包：

npm install @khanghoang/lottie-react-native --save

用法

1. 导入组件：

   import LottieView from '@khanghoang/lottie-react-native';

2. 在组件中使用：

   <LottieView
     source={require('./path/to/animation.json')}
     autoPlay
     loop
   />

属性

source

Lottie 文件的路径或 URL。可以是 JSON 对象、网络 URL 或本地文件的一个路径。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
/>

autoPlay

布尔值，用于控制动画是否自动播放。默认为 false。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
/>

loop

布尔值，用于控制动画是否循环播放。默认为 false。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
/>

speed

播放速度。默认为 1。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  speed={2}
/>

progress

动画播放的进度。默认为 0。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  progress={0.5}
/>

hardwareAccelerationAndroid

布尔值，用于控制在 Android 上是否启用硬件加速。默认为 true。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  hardwareAccelerationAndroid={false}
/>

resizeMode

指定在组件大小和 Lottie 文件大小不匹配时要使用的调整大小的工具。默认为 contain。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  resizeMode="cover"
/>

onLoadStart

当动画开始加载时调用的函数。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  onLoadStart={() => console.log('动画开始加载')}
/>

onLoad

当动画加载完成时调用的函数。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  onLoad={() => console.log('动画加载完成')}
/>

onError

动画加载时发生错误时调用的函数。

<LottieView
  source={require('./path/to/animation.json')}
  autoPlay
  loop
  onError={console.error}
/>

示例代码

以下是一个基本的 Lottie 动画示例：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ---------- ---- ----------------------------------

----- --- - -- -- -
  ------ -
    ----- -------- ----- - ---
      -----------
        ------------------------------------
        --------
        ----
      --
    -------
  --
--

------ ------- ----

这将创建一个以全屏模式播放的动画，当应用启动时自动播放并循环播放。

总结

@khanghoang/lottie-react-native 是一个易于使用的 npm 包，可用于在您的 React Native 应用程序中集成 Lottie 动画。使用上述的属性和示例代码，您可以轻松地使用该包创建自己的动画。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc081e8991b448da5c5