CommonLottieFooter.js
1.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
*
* Created by Stone
* https://github.com/bolan9999
* Email: shanshang130@gmail.com
* Date: 2019/2/18
*
*/
import React from "react";
import { RefreshHeader } from "../RefreshHeader";
import { View } from "react-native";
let LottieView;
export class CommonLottieFooter extends RefreshHeader {
static height: number = 100;
constructor(props){
super(props);
if (!LottieView) LottieView = require("lottie-react-native");
}
render() {
if (this.state.status === "allLoaded") return null;
const { offset, bottomOffset } = this.props;
let progress = offset.interpolate({
inputRange: [
bottomOffset + 50,
bottomOffset + 500
],
outputRange: [0, 1]
});
if (this.state.status === "loading") {
progress = undefined;
}
return (
<View style={{ flex: 1, marginBottom: 20 }}>
<LottieView
key={this.state.status === "loading"}
source={require("./res/loading.json")}
progress={progress}
autoPlay={this.state.status === "loading"}
loop={this.state.status === "loading"}
speed={2}
/>
</View>
);
}
}