@seakoi/native-ui 1.1.0 → 1.1.2

package/src/components/base/carousel/carousel.tsx

@@ -1,57 +1,29 @@
 import { clamp } from 'lodash-es';
-import React, {
-  forwardRef,
-  type ReactElement,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Animated,
-  Easing,
   type LayoutChangeEvent,
-  PanResponder,
-  type PanResponderInstance,
   type StyleProp,
   StyleSheet,
   View,
   type ViewStyle,
 } from 'react-native';
 
-import {
-  getDefaultTotal,
-  isRenderPropChildren,
-  normalizeChildren,
-} from '#components/base/carousel/utils';
 import { useTheme } from '#native-provider';
 
+import {
+  useCarouselAutoplay,
+  useCarouselIndex,
+  useCarouselIndicator,
+  useCarouselLifecycle,
+  useCarouselPanResponder,
+  useCarouselPosition,
+  useCarouselSlides,
+  useCarouselSwipe,
+} from './hooks';
 import { useCarouselStyles } from './style';
-import type { CarouselProps, CarouselRef } from './types';
-
-const getBoundaryIndexRange = ({
-  total,
-  slideSize,
-  trackOffset,
-  stuckAtBoundary,
-}: {
-  total: number;
-  slideSize: number;
-  trackOffset: number;
-  stuckAtBoundary: boolean;
-}) => {
-  if (total <= 0) return { min: 0, max: 0 };
-  if (!stuckAtBoundary) return { min: 0, max: total - 1 };
-
-  const slideRatio = slideSize / 100;
-  const offsetRatio = trackOffset / 100;
-
-  const min = 0 + offsetRatio / (slideRatio || 1);
-  const max = total - 1 - (1 - slideRatio - offsetRatio) / (slideRatio || 1);
-  return { min, max };
-};
+import type { CarouselProps } from './types';
+import { getDefaultTotal, isRenderPropChildren } from './utils';
 
 interface LayoutState {
   width: number;
@@ -59,9 +31,33 @@ interface LayoutState {
 }
 
 /**
- * 轮播图
+ * 轮播图组件
+ *
+ * 支持水平/垂直滑动、循环播放、自动轮播、虚拟渲染等功能的高性能轮播组件。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <Carousel>
+ *   <Carousel.Item><View /></Carousel.Item>
+ *   <Carousel.Item><View /></Carousel.Item>
+ * </Carousel>
+ *
+ * // 循环播放和自动轮播
+ * <Carousel loop autoplay autoplayInterval={3000}>
+ *   {items.map(item => <Carousel.Item key={item.id}>{item.content}</Carousel.Item>)}
+ * </Carousel>
+ *
+ * // 虚拟渲染（大量数据）
+ * <Carousel total={1000}>
+ *   {(index) => <Carousel.Item><Text>{index}</Text></Carousel.Item>}
+ * </Carousel>
+ * ```
+ *
+ * @param props - 组件属性
+ * @returns 轮播图组件
  */
-export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
+export const Carousel = (props: CarouselProps) => {
   const {
     defaultIndex = 0,
     allowTouchMove = true,
@@ -80,6 +76,8 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     total: totalProp,
     children,
     style,
+    blockNativeResponder = true,
+    ref,
   } = props;
 
   const styles = useCarouselStyles();
@@ -88,10 +86,6 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const [layout, setLayout] = useState<LayoutState>({ width: 0, height: 0 });
   const [dragging, setDragging] = useState(false);
   const [animating, setAnimating] = useState(false);
-  const [current, setCurrent] = useState(0);
-
-  const position = useRef(new Animated.Value(0));
-  const positionValueRef = useRef(0);
 
   const normalizedSlideSize = useMemo(() => {
     if (!Number.isFinite(slideSize)) return 100;
@@ -112,26 +106,27 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   }, [children, totalProp]);
 
   const loopEnabled = loop && total > 1;
+
+  // 计算循环播放时需要克隆的前置节点数量
   // 若是非全屏的轮播项，则在循环播放开启的情况下，则会在下一轮展示第一项时看见下一项为空白（或闪烁），这需要额外渲染更多的项（与offset、slideSize相关）
-  const clonesBefore = loopEnabled
-    ? Math.max(
-        1,
-        normalizedSlideSize > 0
-          ? Math.ceil(normalizedTrackOffset / normalizedSlideSize) + 1
-          : 1,
-      )
-    : 0;
-  const clonesAfter = loopEnabled
-    ? Math.max(
-        1,
-        normalizedSlideSize > 0
-          ? Math.ceil(
-              (100 - normalizedTrackOffset - normalizedSlideSize) /
-                normalizedSlideSize,
-            ) + 1
-          : 1,
-      )
-    : 0;
+  const clonesBefore = useMemo(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+
+    const offsetSlides = Math.ceil(normalizedTrackOffset / normalizedSlideSize);
+    return Math.max(1, offsetSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
+
+  // 计算循环播放时需要克隆的后置节点数量
+  const clonesAfter = useMemo(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+
+    const remainingSpace = 100 - normalizedTrackOffset - normalizedSlideSize;
+    const trailingSlides = Math.ceil(remainingSpace / normalizedSlideSize);
+    return Math.max(1, trailingSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
+
   const extTotal = loopEnabled ? total + clonesBefore + clonesAfter : total;
 
   const slidePixels = useMemo(() => {
@@ -146,284 +141,74 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     return trackSize * (normalizedTrackOffset / 100);
   }, [direction, layout.height, layout.width, normalizedTrackOffset]);
 
-  const extIndexRef = useRef(0);
-  const reportIndexRef = useRef<number | null>(null);
-
-  const staticSlides = useMemo(() => {
-    if (isRenderPropChildren(children)) return [];
-    return normalizeChildren(children, total);
-  }, [children, total]);
-
-  const updateCurrent = useCallback(
-    (next: number) => {
-      const normalized = total > 0 ? clamp(next, 0, total - 1) : 0;
-      setCurrent(normalized);
-    },
-    [total],
-  );
-
-  const maybeReportIndex = useCallback(
-    (index: number) => {
-      if (!onIndexChange) return;
-      if (reportIndexRef.current === index) return;
-      reportIndexRef.current = index;
-      onIndexChange(index);
-    },
-    [onIndexChange],
-  );
-
-  const getExtIndexFromIndex = useCallback(
-    (index: number) => {
-      if (!loopEnabled) return index;
-      return clamp(index, 0, total - 1) + clonesBefore;
-    },
-    [clonesBefore, loopEnabled, total],
-  );
-
-  const getIndexFromExtIndex = useCallback(
-    (extIndex: number) => {
-      if (!loopEnabled) return clamp(extIndex, 0, total - 1);
-      if (extIndex < clonesBefore) {
-        return (((extIndex - clonesBefore) % total) + total) % total;
-      }
-      if (extIndex >= clonesBefore + total) {
-        return (extIndex - clonesBefore - total) % total;
-      }
-      return extIndex - clonesBefore;
-    },
-    [clonesBefore, loopEnabled, total],
-  );
-
-  const getTargetExtIndexForIndex = useCallback(
-    (targetIndex: number) => {
-      if (!loopEnabled) return clamp(targetIndex, 0, total - 1);
-
-      const currentExt = extIndexRef.current;
-      const normalizedTarget = clamp(targetIndex, 0, total - 1);
-      const targetExt = normalizedTarget + clonesBefore;
-
-      if (currentExt === clonesBefore && normalizedTarget === total - 1)
-        return clonesBefore - 1;
-      if (currentExt === clonesBefore + total - 1 && normalizedTarget === 0)
-        return clonesBefore + total;
-      return targetExt;
-    },
-    [clonesBefore, loopEnabled, total],
-  );
-
-  const getBoundedPosition = useCallback(
-    (nextPosition: number) => {
-      if (loopEnabled) return nextPosition;
-      if (slidePixels <= 0) return nextPosition;
-      if (total <= 0) return 0;
-
-      const { min, max } = getBoundaryIndexRange({
-        total,
-        slideSize: normalizedSlideSize,
-        trackOffset: normalizedTrackOffset,
-        stuckAtBoundary,
-      });
-      const minPos = min * slidePixels;
-      const maxPos = max * slidePixels;
-
-      if (nextPosition < minPos) {
-        if (!rubberband) return minPos;
-        return minPos - (minPos - nextPosition) * 0.35;
-      }
-      if (nextPosition > maxPos) {
-        if (!rubberband) return maxPos;
-        return maxPos + (nextPosition - maxPos) * 0.35;
-      }
-      return nextPosition;
-    },
-    [
-      loopEnabled,
-      rubberband,
-      slidePixels,
-      normalizedSlideSize,
-      stuckAtBoundary,
-      total,
-      normalizedTrackOffset,
-    ],
-  );
-
-  const animateTo = useCallback((toValue: number, onFinished?: () => void) => {
-    const listenerId = position.current.addListener(({ value }) => {
-      positionValueRef.current = value;
-    });
-    Animated.timing(position.current, {
-      toValue,
-      duration: 300,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      position.current.removeListener(listenerId);
-      if (finished) {
-        positionValueRef.current = toValue;
-        onFinished?.();
-      }
-    });
-  }, []);
-
-  const setPositionImmediate = useCallback((toValue: number) => {
-    position.current.stopAnimation();
-    position.current.setValue(toValue);
-    positionValueRef.current = toValue;
-  }, []);
-
-  const finalizeLoopJumpIfNeeded = useCallback(() => {
-    if (!loopEnabled) return;
-    const currentExt = extIndexRef.current;
-    if (currentExt < clonesBefore) {
-      const targetExt = currentExt + total;
-      extIndexRef.current = targetExt;
-      if (slidePixels > 0) setPositionImmediate(targetExt * slidePixels);
-      return;
-    }
-    if (currentExt >= clonesBefore + total) {
-      const targetExt = currentExt - total;
-      extIndexRef.current = targetExt;
-      if (slidePixels > 0) setPositionImmediate(targetExt * slidePixels);
-    }
-  }, [clonesBefore, loopEnabled, setPositionImmediate, slidePixels, total]);
-
-  const swipeToExtIndex = useCallback(
-    (targetExtIndex: number) => {
-      if (total <= 0) return;
-      if (slidePixels <= 0) {
-        extIndexRef.current = clamp(targetExtIndex, 0, extTotal - 1);
-        setAnimating(false);
-        updateCurrent(getIndexFromExtIndex(extIndexRef.current));
-        return;
-      }
-
-      const boundedExtIndex = clamp(targetExtIndex, 0, extTotal - 1);
-      extIndexRef.current = boundedExtIndex;
-
-      const nextIndex = getIndexFromExtIndex(boundedExtIndex);
-      updateCurrent(nextIndex);
-
-      const rawPosition = boundedExtIndex * slidePixels;
-      const toPosition = getBoundedPosition(rawPosition);
-
-      setAnimating(true);
-      animateTo(toPosition, () => {
-        finalizeLoopJumpIfNeeded();
-        const normalizedIndex = getIndexFromExtIndex(extIndexRef.current);
-        updateCurrent(normalizedIndex);
-        maybeReportIndex(normalizedIndex);
-        setAnimating(false);
-      });
-    },
-    [
-      animateTo,
-      extTotal,
-      finalizeLoopJumpIfNeeded,
-      getBoundedPosition,
-      getIndexFromExtIndex,
-      maybeReportIndex,
-      slidePixels,
-      total,
-      updateCurrent,
-    ],
-  );
-
-  const swipeTo = useCallback(
-    (index: number) => {
-      if (total <= 0) return;
-      const targetIndex = clamp(Math.round(index), 0, total - 1);
-      const targetExtIndex = getTargetExtIndexForIndex(targetIndex);
-      swipeToExtIndex(targetExtIndex);
-    },
-    [getTargetExtIndexForIndex, swipeToExtIndex, total],
-  );
+  const {
+    current,
+    updateCurrent,
+    extIndexRef,
+    reportIndexRef,
+    maybeReportIndex,
+    getExtIndexFromIndex,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    getBoundedPosition,
+  } = useCarouselIndex({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    normalizedSlideSize,
+    normalizedTrackOffset,
+    stuckAtBoundary,
+    rubberband,
+    onIndexChange,
+  });
 
-  const swipeNext = useCallback(() => {
-    if (total <= 1) return;
-    let currentExt = extIndexRef.current;
-    // 若当前处于 after-clone 区域（快速连击导致 finalizeLoopJumpIfNeeded 尚未执行），
-    // 立即将位置平移回真实 item 区域（视觉内容相同，不可感知），再继续前进
-    if (clonesBefore > 0 && currentExt >= clonesBefore + total) {
-      currentExt -= total;
-      extIndexRef.current = currentExt;
-      if (slidePixels > 0) setPositionImmediate(currentExt * slidePixels);
-    }
-    swipeToExtIndex(currentExt + 1);
-  }, [clonesBefore, setPositionImmediate, slidePixels, swipeToExtIndex, total]);
-
-  const swipePrev = useCallback(() => {
-    if (total <= 1) return;
-    let currentExt = extIndexRef.current;
-    // 若当前处于 before-clone 区域（快速连击导致 finalizeLoopJumpIfNeeded 尚未执行），
-    // 立即将位置平移回真实 item 区域（视觉内容相同，不可感知），再继续后退
-    if (clonesBefore > 0 && currentExt < clonesBefore) {
-      currentExt += total;
-      extIndexRef.current = currentExt;
-      if (slidePixels > 0) setPositionImmediate(currentExt * slidePixels);
-    }
-    swipeToExtIndex(currentExt - 1);
-  }, [clonesBefore, setPositionImmediate, slidePixels, swipeToExtIndex, total]);
+  // 位置和动画控制
+  const { position, positionValueRef, animateTo, setPositionImmediate } =
+    useCarouselPosition();
 
-  useImperativeHandle(
+  // 切换逻辑
+  const { swipeNext, swipePrev, swipeToExtIndex } = useCarouselSwipe({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    extTotal,
+    extIndexRef,
+    getBoundedPosition,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    updateCurrent,
+    maybeReportIndex,
+    setAnimating,
+    animateTo,
+    setPositionImmediate,
     ref,
-    () => ({
-      swipeTo,
-      swipeNext,
-      swipePrev,
-    }),
-    [swipeNext, swipePrev, swipeTo],
-  );
-
-  useEffect(() => {
-    if (total <= 0) {
-      updateCurrent(0);
-      reportIndexRef.current = null;
-      extIndexRef.current = 0;
-      setPositionImmediate(0);
-      return;
-    }
+  });
 
-    const normalizedDefault = clamp(Math.round(defaultIndex), 0, total - 1);
-    updateCurrent(normalizedDefault);
-    reportIndexRef.current = normalizedDefault;
+  // 自动轮播
+  useCarouselAutoplay({
+    autoplay,
+    autoplayInterval,
+    total,
+    dragging,
+    current,
+    swipeNext,
+    swipePrev,
+  });
 
-    const extIndex = getExtIndexFromIndex(normalizedDefault);
-    extIndexRef.current = extIndex;
-    if (slidePixels > 0) {
-      setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
-    }
-  }, [
+  // 生命周期管理
+  useCarouselLifecycle({
+    total,
     defaultIndex,
+    slidePixels,
+    extIndexRef,
+    reportIndexRef,
     getExtIndexFromIndex,
     getBoundedPosition,
-    setPositionImmediate,
-    slidePixels,
-    total,
     updateCurrent,
-  ]);
-
-  useEffect(() => {
-    if (slidePixels <= 0) return;
-    const extIndex = extIndexRef.current;
-    setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
-  }, [getBoundedPosition, setPositionImmediate, slidePixels]);
-
-  // 每当 current 变化时，若允许自动轮播 且 开启了自动轮播，则执行轮播
-  useEffect(() => {
-    if (!autoplay) return;
-    if (total <= 1) return;
-    if (dragging) return;
-    if (autoplayInterval <= 0) return;
-
-    const timer = setTimeout(() => {
-      if (autoplay === 'reverse') swipePrev();
-      else swipeNext();
-    }, autoplayInterval);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [autoplay, autoplayInterval, dragging, swipeNext, swipePrev, total, current]);
+    setPositionImmediate,
+  });
 
   const onLayoutTrack = useCallback((e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
@@ -433,95 +218,24 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     });
   }, []);
 
-  const panResponder: PanResponderInstance | null = useMemo(() => {
-    if (!allowTouchMove) return null;
-    if (total <= 1) return null;
-    if (slidePixels <= 0) return null;
-
-    let startPosition = 0;
-    const axis = direction === 'horizontal' ? 'x' : 'y';
-
-    const shouldSet = (_: unknown, gestureState: { dx: number; dy: number }) => {
-      const primary = axis === 'x' ? gestureState.dx : gestureState.dy;
-      // const secondary = axis === 'x' ? gestureState.dy : gestureState.dx;
-      if (Math.abs(primary) < 5) return false;
-      // return Math.abs(primary) >= Math.abs(secondary);
-      return true;
-    };
-
-    return PanResponder.create({
-      onMoveShouldSetPanResponder: shouldSet,
-      onPanResponderGrant: () => {
-        setDragging(true);
-        setAnimating(false);
-        position.current.stopAnimation();
-        startPosition = positionValueRef.current;
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        const delta = axis === 'x' ? gestureState.dx : gestureState.dy;
-        let nextPosition = startPosition - delta;
-
-        // loop 开启时，拖动到最外层有效克隆中心之外则循环偏移，保证视口内始终有内容
-        // minPos/maxPos 是 outermost before/after clone 的中心位置，由 clonesBefore 公式保证此范围内视口始终被覆盖
-        if (extTotal > total && slidePixels > 0) {
-          const totalPixels = total * slidePixels;
-          const minPos = (clonesBefore - 1) * slidePixels;
-          const maxPos = (clonesBefore + total) * slidePixels;
-          while (nextPosition < minPos) {
-            nextPosition += totalPixels;
-            startPosition += totalPixels;
-          }
-          while (nextPosition > maxPos) {
-            nextPosition -= totalPixels;
-            startPosition -= totalPixels;
-          }
-        }
-
-        const bounded = getBoundedPosition(nextPosition);
-        position.current.setValue(bounded);
-        positionValueRef.current = bounded;
-
-        const nextExtIndex = clamp(
-          Math.round(bounded / slidePixels),
-          0,
-          extTotal - 1,
-        );
-        extIndexRef.current = nextExtIndex;
-        updateCurrent(getIndexFromExtIndex(nextExtIndex));
-      },
-      onPanResponderRelease: (_evt, gestureState) => {
-        setDragging(false);
-        const velocity = axis === 'x' ? gestureState.vx : gestureState.vy;
-        position.current.stopAnimation(value => {
-          const baseIndex = value / slidePixels;
-          const projectedIndex = (value - velocity * 2000) / slidePixels;
-
-          const minAdj = Math.floor(baseIndex);
-          const maxAdj = minAdj + 1;
-          const rounded = Math.round(projectedIndex);
-          const adjacent = clamp(rounded, minAdj, maxAdj);
-          swipeToExtIndex(adjacent);
-        });
-      },
-      onPanResponderTerminate: () => {
-        setDragging(false);
-        swipeToExtIndex(extIndexRef.current);
-      },
-      onPanResponderTerminationRequest: () => false,
-      onShouldBlockNativeResponder: () => true,
-    });
-  }, [
+  const panResponder = useCarouselPanResponder({
     allowTouchMove,
-    clonesBefore,
+    total,
+    slidePixels,
     direction,
     extTotal,
-    getBoundedPosition,
+    clonesBefore,
+    blockNativeResponder,
+    position,
+    positionValueRef,
+    extIndexRef,
+    setDragging,
+    setAnimating,
+    updateCurrent,
     getIndexFromExtIndex,
-    slidePixels,
+    getBoundedPosition,
     swipeToExtIndex,
-    total,
-    updateCurrent,
-  ]);
+  });
 
   const trackTransformStyle: StyleProp<ViewStyle> = useMemo(() => {
     const translate = Animated.add(
@@ -531,11 +245,15 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     return direction === 'horizontal'
       ? { transform: [{ translateX: translate }] }
       : { transform: [{ translateY: translate }] };
-  }, [direction, trackOffsetPixels]);
-
-  const renderSlides = useCallback(() => {
-    if (total <= 0) return null;
-    if (slidePixels <= 0) return null;
+  }, [direction, position, trackOffsetPixels]);
+
+  // 计算虚拟渲染的范围
+  // 注意: extIndexRef 的变化不会触发重新计算，
+  // 通过 dragging 和 animating 状态的变化来触发虚拟范围的更新
+  const virtualRange = useMemo(() => {
+    if (total <= 0 || slidePixels <= 0) {
+      return null;
+    }
 
     const isVirtual =
       isRenderPropChildren(children) && typeof totalProp === 'number';
@@ -551,114 +269,68 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       ? clamp(currentExtIndex + effectiveOverscan, 0, extTotal - 1)
       : extTotal - 1;
 
-    const leadingSize = start * slidePixels;
-    const trailingSize = (extTotal - end - 1) * slidePixels;
-
-    const leadSpacerStyle: ViewStyle =
-      direction === 'horizontal' ? { width: leadingSize } : { height: leadingSize };
-    const trailSpacerStyle: ViewStyle =
-      direction === 'horizontal'
-        ? { width: trailingSize }
-        : { height: trailingSize };
-
-    const slideWrapperBaseStyle: ViewStyle =
-      direction === 'horizontal'
-        ? { width: slidePixels, height: '100%' }
-        : { height: slidePixels, width: '100%' };
-
-    const getElementForExtIndex = (extIndex: number) => {
-      const logicalIndex = loopEnabled
-        ? getIndexFromExtIndex(extIndex)
-        : clamp(extIndex, 0, total - 1);
-
-      if (isRenderPropChildren(children)) return children(logicalIndex);
-      return staticSlides[logicalIndex];
-    };
-
-    const slideElements: ReactElement[] = [];
-    for (let extIndex = start; extIndex <= end; extIndex += 1) {
-      const element = getElementForExtIndex(extIndex);
-      if (!element) continue;
-      slideElements.push(
-        <View key={extIndex} style={[styles.slide, slideWrapperBaseStyle]}>
-          {element}
-        </View>,
-      );
-    }
-
-    const leadSpacer =
-      isVirtual && leadingSize > 0 ? <View style={leadSpacerStyle} /> : null;
-    const trailSpacer =
-      isVirtual && trailingSize > 0 ? <View style={trailSpacerStyle} /> : null;
-
-    return (
-      <>
-        {leadSpacer}
-        {slideElements}
-        {trailSpacer}
-      </>
-    );
+    return { start, end, isVirtual };
   }, [
-    children,
-    direction,
-    extTotal,
-    getIndexFromExtIndex,
-    dragging,
-    animating,
-    loopEnabled,
-    slidePixels,
-    staticSlides,
-    styles.slide,
     total,
+    slidePixels,
+    children,
     totalProp,
     virtualOverscan,
+    dragging,
+    animating,
+    extIndexRef, // 保留以表明依赖关系，虽然不会触发更新
+    extTotal,
   ]);
 
-  const renderIndicator = useCallback(() => {
-    if (indicator === false) return null;
-    if (total <= 1) return null;
+  // 计算滑块包装器样式
+  const slideWrapperStyle: ViewStyle = useMemo(() => {
+    return direction === 'horizontal'
+      ? { width: slidePixels, height: '100%' }
+      : { height: slidePixels, width: '100%' };
+  }, [direction, slidePixels]);
 
-    if (typeof indicator === 'function') {
-      return indicator(total, current);
-    }
+  // 计算虚拟渲染的占位空间样式
+  const spacerStyles = useMemo(() => {
+    if (!virtualRange) return null;
 
-    const activeColor = indicatorProps?.color ?? theme.palette.brand7;
-    const inactiveColor = theme.palette.fontGray5;
+    const { start, end } = virtualRange;
+    const leadingSize = start * slidePixels;
+    const trailingSize = (extTotal - end - 1) * slidePixels;
 
-    return (
-      <View
-        style={StyleSheet.flatten([
-          styles.indicatorContainer,
-          indicatorProps?.style,
-        ])}
-      >
-        {Array.from({ length: total }, (_, i) => {
-          const isActive = i === current;
-          return (
-            <View
-              key={i}
-              style={StyleSheet.flatten([
-                styles.indicatorDot,
-                { backgroundColor: isActive ? activeColor : inactiveColor },
-                isActive && styles.indicatorDotActive,
-              ])}
-            />
-          );
-        })}
-      </View>
-    );
-  }, [
-    current,
+    return {
+      leading:
+        direction === 'horizontal'
+          ? { width: leadingSize }
+          : { height: leadingSize },
+      trailing:
+        direction === 'horizontal'
+          ? { width: trailingSize }
+          : { height: trailingSize },
+      leadingSize,
+      trailingSize,
+    };
+  }, [virtualRange, slidePixels, extTotal, direction]);
+
+  const { renderSlides } = useCarouselSlides({
+    children,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    slideWrapperStyle,
+    spacerStyles,
+    slideStyles: styles,
+  });
+
+  const { renderIndicator } = useCarouselIndicator({
     indicator,
-    indicatorProps?.color,
-    indicatorProps?.style,
-    styles.indicatorContainer,
-    styles.indicatorDot,
-    styles.indicatorDotActive,
-    theme.palette.brand7,
-    theme.palette.fontGray5,
+    indicatorProps,
     total,
-  ]);
+    current,
+    activeColor: theme.palette.brand7,
+    inactiveColor: theme.palette.fontGray5,
+    styles,
+  });
 
   const trackInnerStyle: ViewStyle = useMemo(() => {
     return direction === 'horizontal'
@@ -686,6 +358,4 @@ export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       </View>
     </View>
   );
-});
-
-Carousel.displayName = 'Carousel';
+};