@xhsreds/reds-rn-next 0.10.1-beta202512112152 → 0.10.1-beta202512161121

package/src/components/PullRefresh/PullRefresh.tsx

@@ -126,14 +126,22 @@ export default function PullRefresh(props: RedsPullRefresh) {
       // 有拉动距离但是不够设定的下拉高度
     } else if (panValue > 0) {
       updatePullState(PullState.FINISH);
+      setMoveHeight(0);
+      setMovePercent(0);
       animatedTo(0, () => {
         setIsPulling(false);
         updatePullState(PullState.INIT);
+        pan.setValue(0);
+        pan.flattenOffset();
       });
       // 否则就是初始状态
     } else {
       updatePullState(PullState.INIT);
       setIsPulling(false);
+      setMoveHeight(0);
+      setMovePercent(0);
+      pan.setValue(0);
+      pan.flattenOffset();
     }
   };
 
@@ -202,7 +210,19 @@ export default function PullRefresh(props: RedsPullRefresh) {
     if (props.initRefresh && !hasInitRefreshed) {
       return false;
     }
-    return isPulling ? false : scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
+    // Block during refresh states
+    if (isRefreshing || pullState === PullState.LOADING || pullState === PullState.HOLDING) {
+      return false;
+    }
+    // Block if already pulling
+    if (isPulling) {
+      return false;
+    }
+    // Explicitly reject upward swipes
+    if (gestureState.vy < 0) {
+      return false;
+    }
+    return scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
   };
 
   // 手势对象
@@ -216,12 +236,13 @@ export default function PullRefresh(props: RedsPullRefresh) {
       });
     }
     return PanResponder.create({
-      onStartShouldSetPanResponder: canMove,
-      onStartShouldSetPanResponderCapture: canMove,
+      onStartShouldSetPanResponder: () => false,
+      onStartShouldSetPanResponderCapture: () => false,
       onMoveShouldSetPanResponder: canMove,
       onMoveShouldSetPanResponderCapture: canMove,
       onPanResponderGrant: () => {
         animation && animation.stop();
+        pan.flattenOffset();
         // @ts-ignore
         pan.setOffset(pan._value);
         updatePullState(PullState.PULLING);
@@ -244,14 +265,26 @@ export default function PullRefresh(props: RedsPullRefresh) {
       },
       onPanResponderRelease: onRelease,
       onPanResponderTerminationRequest() {
-        return false;
+        if (isPulling || pullState === PullState.PULLING) {
+          return false;
+        }
+        return true;
       },
       onPanResponderTerminate: onRelease,
       onShouldBlockNativeResponder() {
-        return true;
+        return isPulling || pullState === PullState.PULLING;
       },
     });
-  }, [isPulling, scrollY, props.initRefresh, hasInitRefreshed, pullAnimHeight, props.nativeAndroidPullRefresh]);
+  }, [
+    isPulling,
+    scrollY,
+    props.initRefresh,
+    hasInitRefreshed,
+    pullAnimHeight,
+    props.nativeAndroidPullRefresh,
+    isRefreshing,
+    pullState,
+  ]);
 
   // 根据外层传递参数变化进行更新执行（自定义实现启用时）
   useEffect(() => {
@@ -274,9 +307,14 @@ export default function PullRefresh(props: RedsPullRefresh) {
       setPullTimeout(
         //@ts-ignore
         setTimeout(() => {
+          pan.flattenOffset();
+          setMoveHeight(0);
+          setMovePercent(0);
           animatedTo(0, () => {
             setIsPulling(false);
             updatePullState(PullState.INIT);
+            pan.setValue(0);
+            pan.flattenOffset();
           });
           updatePullState(PullState.FINISH);
         }, props?.msHoldingTime ?? 1000),
@@ -296,11 +334,14 @@ export default function PullRefresh(props: RedsPullRefresh) {
 
   // 重写ScrollView的onScroll事件（自定义：用于手势门控/头部位置; Android 原生：注入 RefreshControl）
   const scrollContent = useMemo(() => {
-    return React.Children.map(props.children, (child: any) =>
-      React.cloneElement(child, {
-        // 设置滚动响应频率
-        scrollEventThrottle: 1,
-        ...(Platform.OS === "android" && props.nativeAndroidPullRefresh
+    return React.Children.map(props.children, (child: any) => {
+      const originalOnScroll = child.props.onScroll;
+      const hasNativeDriver =
+        originalOnScroll &&
+        (originalOnScroll["__isNative"] === true || (originalOnScroll as any)?._animation?.useNativeDriver === true);
+
+      const injectedProps =
+        Platform.OS === "android" && props.nativeAndroidPullRefresh
           ? {
               refreshControl: (
                 <RNRefreshControl
@@ -326,37 +367,70 @@ export default function PullRefresh(props: RedsPullRefresh) {
                 />
               ),
               onScroll: (evt: any) => {
-                if (child.props.onScroll && typeof child.props.onScroll === "function") {
-                  child.props.onScroll(evt);
+                if (originalOnScroll && typeof originalOnScroll === "function") {
+                  originalOnScroll(evt);
                 }
               },
             }
-          : {
-              onScroll: (evt: any) => {
-                setScrollY(evt.nativeEvent.contentOffset.y);
-                // iOS下拉刷新Loading时，ScrollView向上滑动的时候，refreshControl部分同样上滑
-                if (pullState === PullState.LOADING && evt.nativeEvent.contentOffset.y > 0) {
-                  const y = Math.max(0, pullAnimHeight - evt.nativeEvent.contentOffset.y);
-                  viewRef.current &&
-                    viewRef.current.setNativeProps({
-                      style: {
-                        transform: [{ translateY: y }],
-                      },
-                    });
-                  animatedViewRef.current &&
-                    animatedViewRef.current.setNativeProps({
-                      style: {
-                        transform: [{ translateY: y }],
-                      },
-                    });
-                }
-                if (child.props.onScroll && typeof child.props.onScroll === "function") {
-                  child.props.onScroll(evt);
-                }
-              },
-            }),
-      }),
-    );
+          : hasNativeDriver
+            ? {
+                // When the child uses native-driver Animated.event, keep it intact to avoid crashes
+                onScroll: originalOnScroll,
+                onMomentumScrollEnd: (evt: any) => {
+                  setScrollY(evt.nativeEvent.contentOffset.y);
+                  child.props.onMomentumScrollEnd && child.props.onMomentumScrollEnd(evt);
+                },
+                onScrollEndDrag: (evt: any) => {
+                  setScrollY(evt.nativeEvent.contentOffset.y);
+                  // Keep header position in loading state
+                  if (pullState === PullState.LOADING && evt.nativeEvent.contentOffset.y > 0) {
+                    const y = Math.max(0, pullAnimHeight - evt.nativeEvent.contentOffset.y);
+                    viewRef.current &&
+                      viewRef.current.setNativeProps({
+                        style: {
+                          transform: [{ translateY: y }],
+                        },
+                      });
+                    animatedViewRef.current &&
+                      animatedViewRef.current.setNativeProps({
+                        style: {
+                          transform: [{ translateY: y }],
+                        },
+                      });
+                  }
+                  child.props.onScrollEndDrag && child.props.onScrollEndDrag(evt);
+                },
+              }
+            : {
+                onScroll: (evt: any) => {
+                  setScrollY(evt.nativeEvent.contentOffset.y);
+                  // iOS下拉刷新Loading时，ScrollView向上滑动的时候，refreshControl部分同样上滑
+                  if (pullState === PullState.LOADING && evt.nativeEvent.contentOffset.y > 0) {
+                    const y = Math.max(0, pullAnimHeight - evt.nativeEvent.contentOffset.y);
+                    viewRef.current &&
+                      viewRef.current.setNativeProps({
+                        style: {
+                          transform: [{ translateY: y }],
+                        },
+                      });
+                    animatedViewRef.current &&
+                      animatedViewRef.current.setNativeProps({
+                        style: {
+                          transform: [{ translateY: y }],
+                        },
+                      });
+                  }
+                  if (originalOnScroll && typeof originalOnScroll === "function") {
+                    originalOnScroll(evt);
+                  }
+                },
+              };
+
+      return React.cloneElement(child, {
+        scrollEventThrottle: 1,
+        ...injectedProps,
+      });
+    });
   }, [
     pullState,
     props.children,