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>
    );
  }
}