React Native加载动画，lottie-web 将json解析成动画

1、安装依赖

npm install lottie-web --save

2.建立resources文件夹，内部导入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/homeAnimation.json')}// json动画资源位置
            autoPlay = {isAuto==undefined ? true : isAuto}
            loop = {isLoop ==undefined ? true : isLoop}
            style={[styles.container,anotherStyle]}/>
        )
    }
}

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

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

//MainPage.js
import React from 'react';
import {StyleSheet, View,Dimensions} from 'react-native';
import { Lottie } from '../resources/js/Lottie';

type Props = {};
export default class MainPage extends React.Component {
  render() {
    return (
      <View>
        <Lottie/>//引入组件
      </View>
    );
  }
}