add LottieRefreshControl

Author: 2534290808

Example/LottieListViewExample.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import {StyleSheet, View, Text,ListView,ScrollView} from 'react-native';
+import PropTypes from 'prop-types';
+import HuaWeiRefreshControl from './HuaWeiRefreshControl';
+import LottieRefreshControl from "./LottieRefreshControl";
+
+export default class LottieListViewExample extends Component {
+    constructor(props){
+        super(props);
+        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+        this.state = {
+            dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
+        };
+    }
+    _onRefresh=()=>{
+        setTimeout(()=>{
+            this._hw && this._hw.finishRefresh()
+        },1000)
+    }
+    render() {
+        return (
+            <View style={{flex: 1}}>
+                <ListView
+                    dataSource={this.state.dataSource}
+                    renderRow={(rowData) => <Text onPress={()=>alert(111)} style={{height:100}}>{rowData}</Text>}
+                    renderScrollComponent={props=><ScrollView
+                        style={{flex:1}}
+                        refreshControl={
+                            <LottieRefreshControl
+                                ref={ref=>this._hw = ref}
+                                onRefresh={this._onRefresh}
+                            />
+                        }
+                        {...props}
+                    />}
+                />
+            </View>
+        )
+    }
+}

Example/LottieRefreshControl.js

@@ -0,0 +1,43 @@
+/**
+ * 类似华为手机的下拉刷新
+ */
+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    View,
+    Text,
+    Animated,
+    Easing
+} from 'react-native';
+import PropTypes from 'prop-types';
+import LottieView from 'lottie-react-native'
+import {SmartRefreshControl, AnyHeader} from 'react-native-smartrefreshlayout';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {SkypeIndicator} from 'react-native-indicators';
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+export default class LottieRefreshControl extends Component {
+    _onRefresh = () => {
+        let {onRefresh} = this.props;
+        onRefresh && onRefresh();
+    }
+    finishRefresh=(params)=>{
+        this._refreshc && this._refreshc.finishRefresh(params)
+    }
+    render() {
+        return (
+            <SmartRefreshControl
+                style={{flex:1}}
+                ref={ref => this._refreshc = ref}
+                children={this.props.children}
+                onRefresh={this._onRefresh}
+                headerHeight={100}
+                HeaderComponent={
+                    <AnyHeader style={{height:100,justifyContent:'center',alignItems:'center'}}>
+                        <LottieView style={{width:100,height:100}} hardwareAccelerationAndroid  autoPlay source={require('./loop.json')} speed={1.5} />
+                    </AnyHeader>
+                }
+            />
+        )
+    }
+}