react-native-refresh-list2 1.0.0

package/src/RefreshControl/RefreshFlatList.tsx

@@ -0,0 +1,372 @@
+// RefreshFlatList.tsx
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Dimensions, type FlatListProps, Platform } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+    runOnJS,
+    interpolate,
+    useAnimatedScrollHandler,
+    withTiming,
+    useAnimatedProps,
+    useAnimatedStyle,
+    useSharedValue,
+    useDerivedValue,
+    withSequence,
+    withDelay,
+    Easing,
+    useAnimatedReaction, type SharedValue,
+} from 'react-native-reanimated';
+import { RefreshContainerContext, RefreshStatus } from './type';
+import RefreshContainer from './RefreshContainer';
+// 假设您不需要单独的 BottomContainer 组件，而是将加载更多内容放在 ListFooterComponent 中
+
+// ------------------- 常量定义 -------------------
+const { height } = Dimensions.get('window');
+
+const MAX_SCROLL_VELOCITY_Y = 20;
+const MIN_SCROLL_VELOCITY_Y = 0.5;
+const DEFAULT_TRIGGLE_HEIGHT = 100;
+const RESET_TIMING_EASING = Easing.bezier(0.33, 1, 0.68, 1);
+const MAX_BOUNCE_DISTANCE = 100
+
+// ------------------- Props 定义 -------------------
+interface RefreshFlatListProps<ItemT> extends FlatListProps<ItemT> {
+    refreshing: boolean;
+    refreshComponent: () => React.ReactNode;
+    onRefresh: () => void;
+    onScroll?: (event: any) => void;
+    handleOnLoadMore?: () => void;
+    triggleHeight?: number;
+    canOffset?: boolean;
+    bounces?: boolean;
+    offsetY?: number
+    scrollParentRef?: any,
+    transitionY?: SharedValue<number>;
+    scrollViewParentTransitionY?: SharedValue<number>;
+}
+
+const RefreshFlatList = <ItemT,>(props: RefreshFlatListProps<ItemT>) => {
+    const {
+        refreshing,
+        onRefresh,
+        refreshComponent,
+        transitionY,
+        triggleHeight = DEFAULT_TRIGGLE_HEIGHT,
+        canOffset = true,
+        bounces = true,
+        onScroll: onScrollHandler,
+        data,
+        renderItem,
+        keyExtractor,
+        offsetY = 0,
+        scrollParentRef,
+        scrollViewParentTransitionY,
+        ...restProps
+    } = props;
+
+    // ------------------- Shared Values 和 Refs -------------------
+    const panRef = useRef<any>(null);
+    const internalScrollRef = useRef<any>(null);
+    const scrollRef = scrollParentRef || internalScrollRef;
+
+    const internalScrollViewParentTransitionY = useSharedValue(0);
+
+    const scrollViewTransitionY = scrollViewParentTransitionY || internalScrollViewParentTransitionY;
+    const offset = useSharedValue(0);
+    const scrollBounse = useSharedValue(false);
+    const refreshStatus = useSharedValue<RefreshStatus>(RefreshStatus.Idle);
+    const scrollViewTotalHeight = useSharedValue(0);
+    const scrollBeginTop = useSharedValue(0)
+    const internalRefreshTransitionY = useSharedValue(0);
+    const refreshTransitionY = transitionY ?? internalRefreshTransitionY
+
+    // ------------------- Derived Values -------------------
+    const direction = useDerivedValue(() => {
+        return refreshTransitionY.value > 0 ? 1 : -1;
+    }, [refreshTransitionY]);
+
+    const canRefresh = useDerivedValue(() => {
+        const marginTop = scrollViewTransitionY.value;
+        // 核心：判断是否触顶 (下拉) 或触底 (上拉/加载更多)
+        return marginTop < 1
+    });
+
+    useAnimatedReaction(
+        () => refreshStatus.value,
+        () => {
+        }
+    );
+
+    // ------------------- Refreshing Side Effect -------------------
+    useEffect(() => {
+        console.log(refreshing)
+        if (refreshing) {
+            console.log(direction.value)
+            if (direction.value === 1) {
+                refreshStatus.value = RefreshStatus.Holding;
+                // 刷新中保持指示器在触发高度
+                refreshTransitionY.value = withTiming(triggleHeight * direction.value);
+            } else if (refreshStatus.value === RefreshStatus.Idle) {
+                // scrollRef.current.scrollToOffset({offset: 0, animated: false});
+                refreshStatus.value = RefreshStatus.Holding;
+                refreshTransitionY.value = withTiming(triggleHeight);
+            }
+        } else if (refreshStatus.value !== RefreshStatus.Idle) {
+            if (direction.value === 1) {
+                // 下拉刷新完成，收起指示器
+                refreshStatus.value = RefreshStatus.Done;
+                refreshTransitionY.value = withDelay(
+                    500,
+                    withTiming(
+                        0,
+                        {
+                            easing: RESET_TIMING_EASING,
+                        },
+                        () => {
+                            refreshStatus.value = RefreshStatus.Idle;
+                        }
+                    )
+                );
+            }
+        }
+    }, [refreshing, direction.value, refreshStatus, refreshTransitionY, triggleHeight]);
+
+    const handleOnRefresh = useCallback(() => {
+        if (refreshing) return;
+        onRefresh && onRefresh();
+    }, [refreshing, onRefresh]);
+
+    // ------------------- Scroll Handler -------------------
+    const onScroll = useAnimatedScrollHandler<{
+        scrollBeginTime: number;
+        scrollBeginY: number;
+    }>({
+        onBeginDrag: (event, context) => {
+            context.scrollBeginTime = new Date().valueOf();
+            context.scrollBeginY = event.contentOffset.y;
+        },
+        onScroll: (event, context) => {
+            onScrollHandler && runOnJS(onScrollHandler)({
+                nativeEvent: event,
+            });
+            const { scrollBeginY, scrollBeginTime } = context;
+            scrollViewTransitionY.value = event.contentOffset.y;
+            // 滚动边界反弹动画逻辑
+            const marginTop = scrollViewTransitionY.value;
+
+            if (marginTop === 0 && !scrollBounse.value) {
+
+                const bounceDirection = marginTop === 0 ? 1 : -1;
+                const endTime = new Date().valueOf();
+                const velocityY = Math.min(
+                    Math.abs(
+                        (scrollViewTransitionY.value - scrollBeginY) /
+                        (endTime - scrollBeginTime)
+                    ),
+                    MAX_SCROLL_VELOCITY_Y
+                );
+                if (!bounces || velocityY < MIN_SCROLL_VELOCITY_Y) return;
+
+                const ratio = (Math.PI / 2 / MAX_SCROLL_VELOCITY_Y) * velocityY;
+                const bounceDistance = (height / 4) * Math.sin(ratio);
+                const duration = 100 + 100 * Math.sin(ratio * 2);
+
+                scrollBounse.value = true;
+                refreshTransitionY.value = withSequence(
+                    withTiming(bounceDistance * bounceDirection, { duration }),
+                    withTiming(
+                        0,
+                        {
+                            duration,
+                            easing: RESET_TIMING_EASING,
+                        },
+                        () => {
+                            scrollBounse.value = false;
+                        }
+                    )
+                );
+            }
+        }
+    });
+
+    // @ts-ignore
+    const nativeRef: any = useRef();
+    const nativeGesture = Gesture.Native().withRef(nativeRef);
+
+
+    const scrollToTopJS = useCallback(() => {
+        // 检查 ref 是否存在
+        if (scrollRef.current) {
+            // 使用 scrollToOffset 替代 scrollToTop，因为 FlatList/ScrollView 实例上
+            // 没有原生 scrollToTop 方法，但有 scrollToOffset
+            // 或者使用你之前提到的 scrollToOffset({offset: 0, animated: false})
+            (scrollRef.current as any).scrollToOffset({
+                offset: 0,
+                animated: false, // 禁用动画以确保即时归位
+            });
+
+            // 如果你的代码中 FlatList 是经过 Animated 包装的，可能需要调用其原生方法
+            // (scrollRef.current as any).getNode().scrollToOffset({ offset: 0, animated: false });
+        }
+    }, [scrollRef]);
+
+    // ------------------- Pan Gesture -------------------
+    const panGesture = Gesture.Pan()
+        .withRef(panRef)
+        .activeOffsetY(10)
+        .simultaneousWithExternalGesture(nativeRef)
+        // 移除 activeOffsetY 或设置为极小值，让优先级完全由 requireExternalGestureToFail 决定
+        // 关键：与原生滚动同时进行，以便在触顶时接管
+        .onBegin(() => {
+            offset.value = refreshTransitionY.value;
+            scrollBeginTop.value = scrollViewTransitionY.value;
+        })
+        .onUpdate(({ translationY }) => {
+            const shouldAllowModify = canRefresh.value || (refreshStatus.value !== RefreshStatus.Idle && (translationY - scrollBeginTop.value) >= 0);
+            if (!shouldAllowModify) {
+                refreshTransitionY.value = 0;
+                // 如果不在触顶区域且未处于刷新状态，则不修改位移
+                return;
+            }
+
+            if (Platform.OS !== 'ios') runOnJS(scrollToTopJS)()
+
+            let nextY =
+                offset.value +
+                interpolate(
+                    (translationY - scrollBeginTop.value),
+                    [0, height],
+                    [0, height / 2],
+                    // 确保超过 height 时不会失控，但这里通常不需要
+                );
+
+            refreshTransitionY.value = Math.min(nextY, MAX_BOUNCE_DISTANCE);
+
+            if (!refreshing) {
+                if (Math.abs(refreshTransitionY.value) >= triggleHeight) {
+                    refreshStatus.value = RefreshStatus.Reached;
+                } else {
+                    refreshStatus.value = RefreshStatus.Pulling;
+                }
+            }
+        })
+        .onEnd(() => {
+            if (refreshing) {
+                if (refreshTransitionY.value >= triggleHeight * direction.value) {
+                    refreshTransitionY.value = withTiming(
+                        triggleHeight * direction.value
+                    );
+                } else {
+                    ``
+                    refreshTransitionY.value = withTiming(0);
+                }
+                return;
+            }
+            if (Math.abs(refreshTransitionY.value) >= triggleHeight) {
+                if (refreshTransitionY.value > 0) {
+                    runOnJS(handleOnRefresh)();
+                }
+            } else {
+                refreshTransitionY.value = withTiming(
+                    0,
+                    {
+                        easing: RESET_TIMING_EASING,
+                    },
+                    () => {
+                        refreshStatus.value = RefreshStatus.Idle;
+                    }
+                );
+            }
+
+        })
+
+    // ------------------- Animated Styles and Props -------------------
+    const animatedStyle = useAnimatedStyle(() => {
+        // 🌟 核心修复：这个 style 将应用于外部 Animated.View，实现整个列表的平移
+        return {
+            transform: [
+                {
+                    translateY: canOffset ? refreshTransitionY.value : 0,
+                },
+            ],
+        };
+    });
+
+    const animatedScrollEnabled = useDerivedValue(() => {
+        if (Platform.OS === 'ios') return true
+        return refreshTransitionY.value <= 0;
+    }, [refreshTransitionY]);
+
+    const animatedProps = useAnimatedProps(() => {
+        const top = -refreshTransitionY.value;
+        return {
+            scrollEnabled: animatedScrollEnabled.value,
+            scrollIndicatorInsets: {
+                top: top - 1,
+                left: 0,
+                bottom: 0,
+                right: 0,
+            }
+        };
+    });
+
+    const derivedTransitionY = useDerivedValue(() => {
+        return refreshTransitionY.value + offsetY;
+    }, [offsetY]); // 依赖 offsetY，如果 offsetY 变化，重新计算
+
+    // ------------------- JSX 渲染 -------------------
+    return (
+        <GestureHandlerRootView style={{
+            flex: 1
+        }}>
+            <RefreshContainerContext.Provider
+                value={{
+                    transitionY: refreshTransitionY,
+                    scrollBounse,
+                    triggleHeight,
+                    refreshing,
+                    refreshStatus,
+                    direction,
+                    canRefresh,
+                }}
+            >
+                <GestureDetector gesture={panGesture}>
+                    {/* 🌟 核心修复：使用 Animated.View 包裹 FlatList 并应用 animatedStyle */}
+                    <GestureDetector gesture={nativeGesture}>
+                        {/* @ts-ignore */}
+                        <Animated.FlatList
+                            ref={scrollRef}
+                            bounces={false}
+                            overScrollMode={'never'}
+                            scrollEventThrottle={16}
+                            onScroll={onScroll}
+                            animatedProps={animatedProps}
+                            // 移除 style={animatedStyle}
+                            onContentSizeChange={(_: number, h: number) => {
+                                scrollViewTotalHeight.value = h;
+                            }}
+                            // FlatList 核心 Props
+                            data={data}
+                            renderItem={renderItem}
+                            keyExtractor={keyExtractor}
+                            {...restProps}
+                            style={[{ flex: 1 }, animatedStyle, restProps.style]}  // 合并样式
+                        />
+                    </GestureDetector>
+                </GestureDetector>
+                {/* RefreshContainer 必须在列表之上，使用绝对定位 */}
+                <RefreshContainer
+                    offsetTop={offsetY}
+                    refreshStatus={refreshStatus}
+                    transitionY={derivedTransitionY}
+                    triggleHeight={triggleHeight + offsetY}
+                >
+                    {refreshComponent && refreshComponent()}
+                </RefreshContainer>
+            </RefreshContainerContext.Provider>
+        </GestureHandlerRootView>
+    );
+}
+
+export default RefreshFlatList;