实现动图 lottie-react-native使用

1.引入lottie-react-native库

yarn add lottie-react-native
(ios)      react-native link lottie-ios
           react-native link lottie-react-native
(android)  react-native link lottie-react-native

2.建立app文件夹，内部导入AE动画的json文件且新建Lottie.js文件，封装Component

文件夹结构

Lottie.js文件内容：

 //Lottie.js
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import LottieView from 'lottie-react-native';

export class Lottie extends Component{
    render(){
        const {sourceJson,isAuto,isLoop,anotherStyle} = this.props;
        return(
            <LottieView
             source={sourceJson ? sourceJson : require('./json/new_like_animation.json')}
            autoPlay = {isAuto==undefined ? true : isAuto}
            loop = {isLoop ==undefined ? true : isLoop}
            style={[styles.container,anotherStyle]}/>
        )
    }
}

3.App.js文件引入封装的Component即可。

//App.js
import React, {Component} from 'react';
import {StyleSheet, View,Dimensions} from 'react-native';
import { Lottie } from './app/Lottie';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Lottie/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

});

4.效果如下：

结果.gif