lottie-react-native的使用

      Lottie是适用于Android和iOS的动画库，它通过JSON格式导出的Adobe After Effects动画文件，可以在移动设备上进行渲染加载，以满足项目中经常需要展示的炫酷的动画效果，简单易用且进度可自定义控制。下面简单介绍一下用法：

由于react native版本不同，其安装lottie-react-native的方式不同：

1.React Native <= 0.58.x 使用这种方式(由于项目中使用的是0.56版本，其他版本安装类似，不再赘述):

npm i --save lottie-react-native@2.5.11

或者：

yarn add lottie-react-native@2.5.11

 2.添加依赖库到项目中:

react-native link lottie-react-native

3.如何使用?

首先引入组件：

import LottieView from 'lottie-react-native';

简单使用方法:

<LottieView
    autoPlay={true}
    source={images.animation_icon}
    progress={0}
    loop={true}
    enableMergePathsAndroidForKitKatAndAbove
/>

4.组件API介绍：

名称	描述	默认值
source	必填 -动画的来源。可以通过字符串或本地带有uri属性的对象引用，也可以是动画的实际JS对象（例如，通过类似方法获得）require('../path/to/animation.json')	无
progress	0到1 之间的数字，此数字表示动画的执行进度，可自义定。	0
speed	动画执行的速度。负值将使动画反向	1
duration	动画的持续时间（以毫秒为单位）。speed设置时优先。仅当source是动画的实际JS对象时才有效。	无
loop	布尔值，动画是否应循环播放。	true
autoPlay	布尔值，动画在显示时是否应自动开始播放。	false
autoSize	布尔值，动画是否应该根据动画JSON中的宽度自动调整自身大小。仅当source是动画的实际JS对象时才有效。	false
style	View提供样式属性	没有
imageAssetsFolder	仅Android可用	没有
onAnimationFinish	动画结束时将调用的回调函数。请注意，仅当loop设置为false 时，才会调用此回调。	没有

5.方法介绍：

方法	描述
play	通过ref在指定的时机播放动画，它也可以播放动画的一部分play(startFrame, endFrame)。
reset	将动画重置回0进度。

注意：这里经本人实际验证，也看了这个库的Issues，其他人也有遇到过这个问题：就是lottie-react-native加载资源时只能加载本地资源，虽然提供了加载网络资源的方法，但其实无法加载网络资源(至少经测试在android上是无法显示)。如果有需要加载网络动画资源还是需要使用react native自带的Image，只是android平台需特殊处理方可显示(后续介绍)。