React Native loads animation, lottie-web parses json into animation

1. Installation dependencies

npm install lottie-web --save

2. Create a resources folder, import the json file of AE animation internally and create a new Lottie.js file to encapsulate the Component component

Lottie.js file content:

 //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. The MainPage.js file can import the encapsulated 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>
    );
  }
}