UPDATE Example

Author: 2534290808

Example/App.js

@@ -14,10 +14,7 @@ import {
     Animated,
     Easing
 } from 'react-native';
-import {SmartRefreshControl, AnyHeader} from 'react-native-smartrefreshlayout';
-import Icon from 'react-native-vector-icons/Ionicons'
-import {DotIndicator,SkypeIndicator} from 'react-native-indicators';
-const AnimatedIcon = Animated.createAnimatedComponent(Icon)
+import HuaWeiRefreshControl from './HuaWeiRefreshControl'
 const instructions = Platform.select({
     ios: 'Press Cmd+R to reload,\n' +
     'Cmd+D or shake for dev menu',
@@ -42,75 +39,19 @@ Date.prototype.Format = function (fmt) { // author: meizz
 }
 type Props = {};
 export default class App extends Component<Props> {
-    state = {
-        text:'下拉刷新',
-        rotate:new Animated.Value(0),
-        refreshing:false
+    _onRefresh=()=>{
+        setTimeout(()=>{
+            this._hw && this._hw.finishRefresh()
+        },1000)
     }
-
     render() {
         return (
             <ScrollView
+                style={{flex:1}}
                 refreshControl={
-                    <SmartRefreshControl
-                        ref={ref=>this._refreshc = ref}
-                        onRefresh={()=>{
-                            console.log('onRefresh'+((new Date()).Format("yyyy-MM-dd hh:mm:ss.S")))
-
-                            setTimeout(()=>{
-                                this._refreshc && this._refreshc.finishRefresh();
-                            },1000)
-                        }}
-                        onPullDownToRefresh={()=>{
-                            this.setState({
-                                text:'下拉刷新',
-                                refreshing:false
-                            })
-                            Animated.timing(this.state.rotate,{
-                                toValue:0,
-                                duration:197,
-                                useNativeDriver:true,
-                                easing:Easing.linear()
-                            }).start()
-                            }
-                        }
-                        onHeaderReleased={(e)=>{
-                            console.log('onHeaderReleased'+((new Date()).Format("yyyy-MM-dd hh:mm:ss.S")))
-                            this.setState({
-                                refreshing:true,
-                                text:'正在刷新'
-                            });
-                        }}
-                        onReleaseToRefresh={()=>{
-                            this.setState({
-                                text:'释放刷新'
-                            })
-                            Animated.timing(this.state.rotate,{
-                                toValue:1,
-                                duration:197,
-                                useNativeDriver:true,
-                                easing:Easing.linear()
-                            }).start()
-                        }}
-                        headerHeight={100}
-                        HeaderComponent={
-                            <AnyHeader style={{
-                                height: 100,
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }}>
-                                {this.state.refreshing?<SkypeIndicator style={{flex:0}} size={24} color={'#2783cf'}/>:<AnimatedIcon style={{
-                                    transform:[{
-                                        rotate:this.state.rotate.interpolate({
-                                            inputRange:[0,1],
-                                            outputRange:['180deg','0deg']
-                                        })
-                                    }]
-                                }} name="md-arrow-up" color="#2783cf" size={24}/>}
-                                <Text style={{marginLeft:15}}>{this.state.text}</Text>
-                            </AnyHeader>
-                        }
+                    <HuaWeiRefreshControl
+                        ref={ref=>this._hw = ref}
+                        onRefresh={this._onRefresh}
                     />
                 }
             >

Example/HuaWeiRefreshControl.js

@@ -0,0 +1,93 @@
+/**
+ * 类似华为手机的下拉刷新
+ */
+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    View,
+    Text,
+    Animated,
+    Easing
+} from 'react-native';
+import PropTypes from 'prop-types';
+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 HuaWeiRefreshControl extends Component {
+    state = {
+        text: '下拉刷新',
+        rotate: new Animated.Value(0),
+        refreshing: false
+    }
+    _onPullDownToRefresh = () => {
+        this.setState({
+            text: '下拉刷新',
+            refreshing: false
+        })
+        Animated.timing(this.state.rotate, {
+            toValue: 0,
+            duration: 197,
+            useNativeDriver: true,
+            easing: Easing.linear()
+        }).start()
+    }
+    _onReleased = () => {
+        this.setState({
+            refreshing: true,
+            text: '正在刷新'
+        });
+    }
+    _onReleaseToRefresh = () => {
+        this.setState({
+            text: '释放刷新'
+        })
+        Animated.timing(this.state.rotate, {
+            toValue: 1,
+            duration: 197,
+            useNativeDriver: true,
+            easing: Easing.linear()
+        }).start()
+    }
+    _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}
+                onPullDownToRefresh={this._onPullDownToRefresh}
+                onHeaderReleased={this._onReleased}
+                onReleaseToRefresh={this._onReleaseToRefresh}
+                headerHeight={100}
+                HeaderComponent={
+                    <AnyHeader style={{
+                        height: 100,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        {this.state.refreshing ? <SkypeIndicator style={{flex: 0}} size={24} color={'#2783cf'}/> :
+                            <AnimatedIcon style={{
+                                transform: [{
+                                    rotate: this.state.rotate.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: ['180deg', '0deg']
+                                    })
+                                }]
+                            }} name="md-arrow-up" color="#2783cf" size={24}/>}
+                        <Text style={{marginLeft: 15}}>{this.state.text}</Text>
+                    </AnyHeader>
+                }
+            />
+        )
+    }
+}