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