react-native-pull鸿蒙化 (#1)

Co-authored-by: 祝乔林 <zhuqiaolin2@h-partners.com>

Author: zql602263131

.idea/.gitignore

@@ -1,32 +1,10 @@
 'use strict';
 
 import React, { Component } from 'react';
-import { ListView } from 'react-native';
+import { FlatList } from 'react-native';
 
 import Pullable from './Pullable';
 
-/**
-支持android&ios可以下拉刷新的PullList组件
-Demo:
-import {PullList} from 'react-native-pullview';
-
-<PullList onPulling={} onPullOk={} onPullRelease={} isPullEnd={true}
-topIndicatorRender={({pulling, pullok, pullrelease}) => {}} topIndicatorHeight={60}
-{...ListView.props}
->
-
-Demo2:
-    topIndicatorRender(pulling, pullok, pullrelease) {
-        return <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
-            <ActivityIndicator size="small" color="gray" />
-            {pulling ? <Text>下拉刷新2...</Text> : null}
-            {pullok ? <Text>松开刷新2......</Text> : null}
-            {pullrelease ? <Text>玩命刷新中2......</Text> : null}
-        </View>;
-    }
-    <PullList onPullRelease={this.props.onRefresh} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60} {...ListView.props} />
-*/
-
 export default class extends Pullable {
 
     constructor(props) {
@@ -41,6 +19,7 @@ export default class extends Pullable {
     }
 
     scrollTo(...args) {
+        console.log(...args);
         this.scroll.scrollTo(...args);
     }
 
@@ -50,7 +29,7 @@ export default class extends Pullable {
 
     getScrollable() {
         return (
-            <ListView ref={(c) => {this.scroll = c;}} onScroll={this.onScroll} {...this.props} />
+            <FlatList  ref={(c) => {this.scroll = c;}}  scrollEnabled={this.state.scrollEnabled} onScroll={this.onScroll} {...this.props} />
         );
     }
 }

.idea/misc.xml

@@ -65,7 +65,7 @@ export default class extends Pullable {
 
     getScrollable(refreshControl) {
         return (
-            <ScrollView ref={(c) => {this.scroll = c;}} refreshControl={refreshControl} onScroll={this.onScroll}>
+            <ScrollView ref={(c) => {this.scroll = c;}} scrollEnabled={this.state.scrollEnabled} refreshControl={refreshControl} onScroll={this.onScroll}>
                 {this.props.children}
             </ScrollView>
         );

.idea/modules.xml

@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { Component } from 'react';
+import React, { Component, useRef } from 'react';
 import {
     View,
     Text,
@@ -58,42 +58,62 @@ export default class extends Component {
         this.renderTopIndicator = this.renderTopIndicator.bind(this);
         this.defaultTopIndicatorRender = this.defaultTopIndicatorRender.bind(this);
         this.panResponder = PanResponder.create({
-            onStartShouldSetPanResponder: this.onShouldSetPanResponder.bind(this),
-            onMoveShouldSetPanResponder: this.onShouldSetPanResponder.bind(this),
+            onStartShouldSetPanResponder: this.onStartShouldSetPanResponder.bind(this),
+            onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder.bind(this),
             onPanResponderGrant: () => { },
             onPanResponderMove: this.onPanResponderMove.bind(this),
             onPanResponderRelease: this.onPanResponderRelease.bind(this),
             onPanResponderTerminate: this.onPanResponderRelease.bind(this),
         });
         this.setFlag(defaultFlag);
     }
-
-    onShouldSetPanResponder(e, gesture) {
+    onStartShouldSetPanResponder(e, gesture) {
+        console.log('onStartShouldSetPanResponder----------->', gesture.dy)
+    }
+    onMoveShouldSetPanResponder(e, gesture) {
+        console.log('onMoveShouldSetPanResponder----------->', gesture.dy)
+        if( gesture.dy>0){
+            this.setState({
+                scrollEnabled: false,
+            });
+        }else{
+            this.setState({
+                scrollEnabled: true,
+            });
+        }
         if (!this.pullable || !isVerticalGesture(gesture.dx, gesture.dy)) { // 不使用pullable,或非向上 或向下手势不响应
             return false;
         }
-
         if (!this.state.scrollEnabled) {
             this.lastY = this.state.pullPan.y._value;
             return gesture.dy >= 0;
+            this.setState({
+                scrollEnabled: true,
+            });
         } else {
             return false;
         }
     }
 
     onPanResponderMove(e, gesture) {
+        console.log('onPanResponderMove----------->', gesture.dy)
         this.gesturePosition = {
             x: this.defaultXY.x,
             y: gesture.dy
         };
-
         if (isUpGesture(gesture.dx, gesture.dy)) { //向上滑动
+            this.setState({
+                scrollEnabled: true,
+            });  
             if (this.isPullState()) {
                 this.resetDefaultXYHandler();
             } else if (this.props.onPushing) {
                 this.props.onPushing(this.gesturePosition)
             }
         } else if (isDownGesture(gesture.dx, gesture.dy)) { //下拉
+            this.setState({
+                scrollEnabled: false,
+            });
             this.state.pullPan.setValue({
                 x: this.defaultXY.x,
                 y: this.lastY + gesture.dy / 2
@@ -107,14 +127,15 @@ export default class extends Component {
                 }
 
                 this.setFlag(flagPulling);
-            } else { //下拉到位
-                if (!this.state.pullok) {
+            }  else if (gesture.dy >= this.topIndicatorHeight + this.pullOkMargin){ //下拉到位
+                if (!this.flag.pullok) {
                     if (this.props.onPullOk) {
                         this.props.onPullOk();
                     }
+                    this.setFlag(flagPullok);
                 }
 
-                this.setFlag(flagPullok);
+
             }
         }
     }
@@ -136,7 +157,8 @@ export default class extends Component {
             Animated.timing(this.state.pullPan, {
                 toValue: { x: 0, y: 0 },
                 easing: Easing.linear,
-                duration: this.duration
+                duration: this.duration,
+                useNativeDriver:false
             }).start();
         }
     }
@@ -177,7 +199,8 @@ export default class extends Component {
         Animated.timing(this.state.pullPan, {
             toValue: this.defaultXY,
             easing: Easing.linear,
-            duration: this.duration
+            duration: this.duration,
+            useNativeDriver:false
         }).start();
     }