react-native-system-ui 0.0.1 → 0.0.3

package/dist/cjs/components/swiper/Swiper.js

@@ -22,25 +22,12 @@ var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
 var _SwiperItem = _interopRequireDefault(require("./SwiperItem"));
 var _SwiperPagIndicator = _interopRequireDefault(require("./SwiperPagIndicator"));
+var _utils = require("./utils");
+var _useSwiperWeb = require("./useSwiperWeb");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const FALLBACK_WIDTH = 375;
-const FALLBACK_HEIGHT = 667;
-const runAfterFrames = (frames, fn) => {
-  const raf = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : cb => setTimeout(cb, 16);
-  let left = Math.max(1, frames);
-  const step = () => {
-    left -= 1;
-    if (left <= 0) {
-      fn();
-      return;
-    }
-    raf(step);
-  };
-  raf(step);
-};
-const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const SwiperImpl = (props, ref) => {
   const {
     initialSwipe = 0,
     touchable = true,
@@ -64,16 +51,16 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     renderItem,
     testID
   } = props;
-  const initialSwipeValue = (0, _validate.isFiniteNumber)(initialSwipe) ? initialSwipe : 0;
-  const durationMs = (0, _validate.isFiniteNumber)(duration) ? Math.max(0, duration) : 0;
-  const slideSizePct = (0, _validate.isFiniteNumber)(slideSize) ? (0, _number.clamp)(slideSize, 1, 100) : 100;
-  const trackOffsetPct = (0, _validate.isFiniteNumber)(trackOffset) ? (0, _number.clamp)(trackOffset, 0, 100) : 0;
+  const initialSwipeValue = (0, _utils.getInitialSwipeValue)(initialSwipe);
+  const durationMs = (0, _utils.getDurationMs)(duration);
+  const slideSizePct = (0, _utils.getSlideSizePct)(slideSize);
+  const trackOffsetPct = (0, _utils.getTrackOffsetPct)(trackOffset);
   const {
     width: windowWidth,
     height: windowHeight
   } = (0, _reactNative().useWindowDimensions)();
-  const viewportWidth = windowWidth || FALLBACK_WIDTH;
-  const viewportHeight = windowHeight || FALLBACK_HEIGHT;
+  const viewportWidth = windowWidth || _utils.FALLBACK_WIDTH;
+  const viewportHeight = windowHeight || _utils.FALLBACK_HEIGHT;
   const [containerLayout, setContainerLayout] = (0, _react().useState)({
     width: 0,
     height: 0
@@ -85,14 +72,32 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const nativeMomentumRef = (0, _react().useRef)(false);
   const prevIndexRef = (0, _react().useRef)(initialSwipeValue);
   const currentDisplayIndexRef = (0, _react().useRef)(initialSwipeValue);
+  const desiredIndexRef = (0, _react().useRef)(initialSwipeValue);
   const isWeb = _reactNative().Platform.OS === 'web';
   const nativeQueuedScrollRef = (0, _react().useRef)(null);
+  const nativeScrollSeqRef = (0, _react().useRef)(0);
+  const nativeScrollEndTimerRef = (0, _react().useRef)(null);
+  const scrollToIndexSafe = (0, _react().useCallback)((index, animated) => {
+    try {
+      flatListRef.current?.scrollToIndex({
+        index,
+        animated
+      });
+    } catch {}
+  }, []);
+  const clearNativeScrollEndTimer = (0, _react().useCallback)(() => {
+    if (nativeScrollEndTimerRef.current) {
+      clearTimeout(nativeScrollEndTimerRef.current);
+      nativeScrollEndTimerRef.current = null;
+    }
+  }, []);
   const validChildren = (0, _react().useMemo)(() => {
     if (children) {
-      return _react().default.Children.toArray(children).filter(child => {
-        if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
+      return _react().Children.toArray(children).filter(child => {
+        if (! /*#__PURE__*/(0, _react().isValidElement)(child)) return false;
+        if (child.type === _SwiperItem.default) return true;
         const type = child.type;
-        return type === _SwiperItem.default || type?.displayName === 'SwiperItem';
+        return type.displayName === 'SwiperItem';
       });
     }
     return [];
@@ -117,12 +122,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     if (!shouldLoop || count <= 1) {
       return itemsData;
     }
-    return [...itemsData.slice(-1),
-    // 末尾的复制
-    ...itemsData,
-    // 原始数据
-    ...itemsData.slice(0, 1) // 开头的复制
-    ];
+    return [...itemsData.slice(-1), ...itemsData, ...itemsData.slice(0, 1)];
   }, [shouldLoop, itemsData, count]);
   const displayData = shouldLoop ? loopData : itemsData;
   const displayCount = displayData.length;
@@ -132,19 +132,16 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     if (index === displayCount - 1) return 0;
     return index - 1;
   }, [shouldLoop, count, displayCount]);
-  const handleContainerLayout = e => {
+  const handleContainerLayout = (0, _react().useCallback)(e => {
     const {
       width,
       height
     } = e.nativeEvent.layout;
-    setContainerLayout(prev => {
-      if (prev.width === width && prev.height === height) return prev;
-      return {
-        width,
-        height
-      };
+    setContainerLayout(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
     });
-  };
+  }, []);
   const containerWidth = containerLayout.width || viewportWidth;
   const containerHeight = containerLayout.height || viewportHeight;
   const crossAxisMeasured = vertical ? containerLayout.width : containerLayout.height;
@@ -175,14 +172,12 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const nonLoopSnapOffsets = (0, _react().useMemo)(() => {
     if (!stuckAtBoundaryEnabled || count <= 1) return null;
     const offsets = new Array(count);
-    for (let i = 0; i < count; i += 1) {
-      if (i === 0) offsets[i] = nonLoopMinOffset;else if (i === count - 1) offsets[i] = nonLoopMaxOffset;else offsets[i] = slideSizeValue * i;
-    }
+    for (let i = 0; i < count; i += 1) offsets[i] = i === 0 ? nonLoopMinOffset : i === count - 1 ? nonLoopMaxOffset : slideSizeValue * i;
     return offsets;
   }, [count, nonLoopMaxOffset, nonLoopMinOffset, slideSizeValue, stuckAtBoundaryEnabled]);
   const getInitialIndex = (0, _react().useCallback)(() => {
     const initial = (0, _number.clamp)(initialSwipeValue, 0, count - 1);
-    return shouldLoop ? initial + 1 : initial; // +1 因为循环模式下第一个是复制的末尾
+    return shouldLoop ? initial + 1 : initial;
   }, [initialSwipeValue, count, shouldLoop]);
   const [current, setCurrent] = (0, _react().useState)(() => getInitialIndex());
   const [indicatorIndex, setIndicatorIndex] = (0, _react().useState)(() => getDisplayIndex(getInitialIndex()));
@@ -193,12 +188,20 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const autoHeightEnabled = autoHeight && !vertical;
   const [autoHeightValue, setAutoHeightValue] = (0, _react().useState)(undefined);
   const measuredHeightsRef = (0, _react().useRef)({});
-  const webOffsetRef = (0, _react().useRef)(0);
-  const startOffsetRef = (0, _react().useRef)(0);
-  const panLockRef = (0, _react().useRef)(false);
-  const webTranslateXAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const webTranslateYAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const panLatestRef = (0, _react().useRef)({
+  const swipeToRef = (0, _react().useRef)(() => {});
+  const onDragStartRef = (0, _react().useRef)(() => {});
+  const onDragEndRef = (0, _react().useRef)(() => {});
+  const {
+    webOffsetRef,
+    webTranslateXAnim,
+    webTranslateYAnim,
+    webTrackTransform,
+    panResponder,
+    stopWebSnapAnim,
+    cancelWebRaf,
+    webSnapAnimRef
+  } = (0, _useSwiperWeb.useSwiperWeb)({
+    isWeb,
     enabledState,
     touchable,
     vertical,
@@ -208,97 +211,53 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     slideSizeValue,
     nonLoopMinOffset,
     nonLoopMaxOffset,
-    maxOffsetLoop: Math.max(0, displayCount - 1) * slideSizeValue,
-    duration: durationMs,
-    preventScroll
+    durationMs,
+    preventScroll,
+    trackOffsetPx,
+    swipeToRef,
+    onDragStart: () => onDragStartRef.current(),
+    onDragEnd: () => onDragEndRef.current()
   });
-  panLatestRef.current = {
-    enabledState,
-    touchable,
-    vertical,
-    count,
-    shouldLoop,
-    displayCount,
-    slideSizeValue,
-    nonLoopMinOffset,
-    nonLoopMaxOffset,
-    maxOffsetLoop: Math.max(0, displayCount - 1) * slideSizeValue,
-    duration: durationMs,
-    preventScroll
-  };
-  const webRafIdRef = (0, _react().useRef)(null);
-  const webPendingOffsetRef = (0, _react().useRef)(null);
-  const flushWebTranslate = () => {
-    const pending = webPendingOffsetRef.current;
-    if (pending == null) return;
-    webPendingOffsetRef.current = null;
-    const latest = panLatestRef.current;
-    (latest.vertical ? webTranslateYAnim : webTranslateXAnim).setValue(pending);
-  };
-  const scheduleWebTranslate = next => {
-    webPendingOffsetRef.current = next;
-    if (webRafIdRef.current != null) return;
-    webRafIdRef.current = requestAnimationFrame(() => {
-      webRafIdRef.current = null;
-      flushWebTranslate();
-    });
-  };
-  const cancelWebRaf = () => {
-    if (webRafIdRef.current != null) {
-      cancelAnimationFrame(webRafIdRef.current);
-      webRafIdRef.current = null;
-    }
-    webPendingOffsetRef.current = null;
-  };
-  const webSnapAnimRef = (0, _react().useRef)(null);
-  const stopWebSnapAnim = () => {
-    const anim = webSnapAnimRef.current;
-    if (anim) {
-      anim.stop();
-      webSnapAnimRef.current = null;
-    }
-    const latest = panLatestRef.current;
-    const activeAnim = latest.vertical ? webTranslateYAnim : webTranslateXAnim;
-    let nextOffset = webOffsetRef.current;
-    activeAnim.stopAnimation(value => {
-      if (typeof value === 'number') {
-        nextOffset = value;
-      }
-    });
-    (latest.vertical ? webTranslateXAnim : webTranslateYAnim).stopAnimation();
-    webOffsetRef.current = nextOffset;
-  };
   (0, _react().useEffect)(() => {
     return () => {
       cancelWebRaf();
       stopWebSnapAnim();
+      clearNativeScrollEndTimer();
     };
-  }, []);
-  const webTrackTransform = (0, _react().useMemo)(() => {
-    if (vertical) {
-      return trackOffsetPx ? [{
-        translateY: trackOffsetPx
-      }, {
-        translateY: webTranslateYAnim
-      }] : [{
-        translateY: webTranslateYAnim
-      }];
+  }, [cancelWebRaf, stopWebSnapAnim, clearNativeScrollEndTimer]);
+  const finishNativeScroll = (0, _react().useCallback)(() => {
+    clearNativeScrollEndTimer();
+    isScrollingRef.current = false;
+    nativeMomentumRef.current = false;
+    const queued = nativeQueuedScrollRef.current;
+    if (queued && flatListRef.current) {
+      nativeQueuedScrollRef.current = null;
+      const nextRealIndex = getDisplayIndex(queued.index);
+      (0, _utils.runAfterFrames)(1, () => {
+        swipeToRef.current(nextRealIndex, queued.animated);
+      });
     }
-    return trackOffsetPx ? [{
-      translateX: trackOffsetPx
-    }, {
-      translateX: webTranslateXAnim
-    }] : [{
-      translateX: webTranslateXAnim
-    }];
-  }, [trackOffsetPx, vertical, webTranslateXAnim, webTranslateYAnim]);
+  }, [clearNativeScrollEndTimer, getDisplayIndex]);
+  const scheduleNativeScrollFallback = (0, _react().useCallback)(() => {
+    clearNativeScrollEndTimer();
+    const seq = nativeScrollSeqRef.current + 1;
+    nativeScrollSeqRef.current = seq;
+    const timeout = Math.max(700, durationMs + 500);
+    nativeScrollEndTimerRef.current = setTimeout(() => {
+      if (nativeScrollSeqRef.current !== seq) return;
+      if (isDraggingRef.current) return;
+      if (!isScrollingRef.current) return;
+      finishNativeScroll();
+    }, timeout);
+  }, [clearNativeScrollEndTimer, durationMs, finishNativeScroll]);
   (0, _react().useEffect)(() => {
     setEnabledState(enabled);
   }, [enabled]);
   const currentRef = (0, _react().useRef)(current);
   (0, _react().useEffect)(() => {
     currentRef.current = current;
-  }, [current]);
+    desiredIndexRef.current = getDisplayIndex(current);
+  }, [current, getDisplayIndex]);
   const handleItemLayout = (0, _react().useCallback)((displayIndex, e) => {
     if (!autoHeightEnabled) return;
     const height = e.nativeEvent.layout.height;
@@ -338,42 +297,42 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     const lastAligned = nativeLastAlignedMainAxisRef.current;
     if (lastAligned > 0 && Math.abs(mainAxisMeasured - lastAligned) < 0.5) return;
     nativeLastAlignedMainAxisRef.current = mainAxisMeasured;
-    runAfterFrames(2, () => {
-      try {
-        flatListRef.current?.scrollToIndex({
-          index: currentRef.current,
-          animated: false
-        });
-      } catch {}
+    (0, _utils.runAfterFrames)(2, () => {
+      scrollToIndexSafe(currentRef.current, false);
     });
   }, [isWeb, count, vertical, containerLayout.height, containerLayout.width]);
   const swipeTo = (0, _react().useCallback)((index, animated = true) => {
     if (count === 0) return;
-    const clampedIndex = (0, _number.clamp)(index, 0, count - 1);
+    const targetRealIndex = (0, _number.clamp)(index, 0, count - 1);
+    const fromRealIndex = desiredIndexRef.current;
+    desiredIndexRef.current = targetRealIndex;
     const currentIndex = currentRef.current;
-    const displayIndex = getDisplayIndex(currentIndex);
     let targetIndex;
     let needsJump = false;
     let jumpOffset = null;
     let jumpDisplayIndex = null;
     if (shouldLoop) {
-      if (displayIndex === count - 1 && clampedIndex === 0) {
+      if (fromRealIndex === count - 1 && targetRealIndex === 0) {
         targetIndex = displayCount - 1;
         needsJump = true;
         jumpOffset = -1 * slideSizeValue;
         jumpDisplayIndex = 1;
-      } else if (displayIndex === 0 && clampedIndex === count - 1) {
+      } else if (fromRealIndex === 0 && targetRealIndex === count - 1) {
         targetIndex = 0;
         needsJump = true;
         jumpOffset = -count * slideSizeValue;
         jumpDisplayIndex = count;
       } else {
-        targetIndex = clampedIndex + 1; // 循环模式下需要偏移
+        targetIndex = targetRealIndex + 1;
       }
     } else {
-      targetIndex = clampedIndex;
+      targetIndex = targetRealIndex;
     }
     if (isWeb) {
+      if (!needsJump && targetIndex === currentIndex) {
+        if (autoplay && enabledState) startAutoplay();
+        return;
+      }
       stopWebSnapAnim();
       const offset = shouldLoop ? -targetIndex * slideSizeValue : -1 * (nonLoopSnapOffsets?.[targetIndex] ?? slideSizeValue * targetIndex);
       webOffsetRef.current = offset;
@@ -391,6 +350,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
             finished
           }) => {
             webSnapAnimRef.current = null;
+            if (autoplay && enabledState) startAutoplay();
             if (!finished || jumpOffset === null || jumpDisplayIndex === null) return;
             webOffsetRef.current = jumpOffset;
             if (vertical) {
@@ -409,6 +369,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
           }
           webOffsetRef.current = jumpOffset;
           setCurrentSafe(jumpDisplayIndex);
+          if (autoplay && enabledState) startAutoplay();
         }
       } else {
         const animValue = vertical ? webTranslateYAnim : webTranslateXAnim;
@@ -422,82 +383,103 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
           webSnapAnimRef.current = anim;
           anim.start(() => {
             webSnapAnimRef.current = null;
+            if (autoplay && enabledState) startAutoplay();
           });
         } else {
           animValue.setValue(offset);
+          if (autoplay && enabledState) startAutoplay();
         }
         setCurrentSafe(targetIndex);
       }
     } else if (flatListRef.current) {
-      if (isScrollingRef.current && animated) {
+      if (!needsJump && targetIndex === currentIndex) {
+        finishNativeScroll();
+        if (autoplay && enabledState) startAutoplay();
+        return;
+      }
+      if (isDraggingRef.current && animated) {
         nativeQueuedScrollRef.current = {
           index: targetIndex,
           animated
         };
         return;
       }
-      isScrollingRef.current = true;
-      try {
-        flatListRef.current.scrollToIndex({
-          index: targetIndex,
-          animated
-        });
-      } catch {
-        isScrollingRef.current = false;
+      if (isScrollingRef.current && animated) {
         nativeQueuedScrollRef.current = {
           index: targetIndex,
           animated
         };
+        scheduleNativeScrollFallback();
+        scrollToIndexSafe(targetIndex, true);
         return;
       }
+      isScrollingRef.current = true;
+      if (animated) {
+        scheduleNativeScrollFallback();
+      } else {
+        clearNativeScrollEndTimer();
+      }
+      scrollToIndexSafe(targetIndex, animated);
+      if (!animated) {
+        setCurrentSafe(targetIndex);
+        if (autoplay && enabledState) startAutoplay();
+      }
       if (needsJump && jumpDisplayIndex != null && !animated) {
-        runAfterFrames(2, () => {
+        (0, _utils.runAfterFrames)(2, () => {
           flatListRef.current?.scrollToIndex({
             index: jumpDisplayIndex,
             animated: false
           });
           setCurrentSafe(jumpDisplayIndex);
         });
-      } else if (!animated) {
-        setCurrentSafe(targetIndex);
       }
       if (!animated) {
-        runAfterFrames(1, () => {
-          isScrollingRef.current = false;
-          const queued = nativeQueuedScrollRef.current;
-          if (queued && flatListRef.current) {
-            nativeQueuedScrollRef.current = null;
-            swipeTo(getDisplayIndex(queued.index), queued.animated);
-          }
+        (0, _utils.runAfterFrames)(1, () => {
+          finishNativeScroll();
         });
       }
     }
-  }, [count, shouldLoop, isWeb, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim, nonLoopSnapOffsets, getDisplayIndex, displayCount, stopWebSnapAnim, setCurrentSafe, durationMs]);
-  const swipeToRef = (0, _react().useRef)(swipeTo);
+  }, [count, shouldLoop, isWeb, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim, nonLoopSnapOffsets, displayCount, stopWebSnapAnim, setCurrentSafe, durationMs, clearNativeScrollEndTimer, finishNativeScroll, scheduleNativeScrollFallback]);
   (0, _react().useEffect)(() => {
     swipeToRef.current = swipeTo;
   }, [swipeTo]);
   const swipeNext = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const displayIndex = getDisplayIndex(currentRef.current);
-    const nextIndex = displayIndex === count - 1 ? 0 : displayIndex + 1;
-    swipeTo(nextIndex);
-  }, [count, getDisplayIndex, swipeTo]);
+    const baseIndex = desiredIndexRef.current;
+    swipeTo(baseIndex === count - 1 ? 0 : baseIndex + 1);
+  }, [count, swipeTo]);
   const swipePrev = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const displayIndex = getDisplayIndex(currentRef.current);
-    const prevIndex = displayIndex === 0 ? count - 1 : displayIndex - 1;
-    swipeTo(prevIndex);
-  }, [count, getDisplayIndex, swipeTo]);
+    const baseIndex = desiredIndexRef.current;
+    swipeTo(baseIndex === 0 ? count - 1 : baseIndex - 1);
+  }, [count, swipeTo]);
+  const stopAutoplay = (0, _react().useCallback)(() => {
+    if (autoplayTimerRef.current) {
+      clearTimeout(autoplayTimerRef.current);
+      autoplayTimerRef.current = null;
+    }
+  }, []);
+  const startAutoplay = (0, _react().useCallback)(delay => {
+    if (!autoplay || count <= 1 || !enabledState) return;
+    if (isDraggingRef.current || isScrollingRef.current) return;
+    stopAutoplay();
+    const interval = (0, _validate.isFiniteNumber)(autoplay) && Math.max(0, autoplay) || 5000;
+    autoplayTimerRef.current = setTimeout(() => {
+      if (isDraggingRef.current || isScrollingRef.current) return;
+      swipeNext();
+      startAutoplay();
+    }, delay ?? interval);
+  }, [autoplay, count, enabledState, swipeNext, stopAutoplay]);
   const handleNativeScrollEndByOffset = (0, _react().useCallback)(offset => {
     if (count === 0) return;
+    clearNativeScrollEndTimer();
     isScrollingRef.current = false;
     nativeMomentumRef.current = false;
     if (!slideSizeValue) return;
     let index = Math.round(offset / slideSizeValue);
     if (shouldLoop) {
       if (index === 0) {
-        runAfterFrames(2, () => {
+        (0, _utils.runAfterFrames)(2, () => {
           flatListRef.current?.scrollToIndex({
             index: count,
             animated: false
@@ -505,7 +487,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         });
         index = count;
       } else if (index === displayCount - 1) {
-        runAfterFrames(2, () => {
+        (0, _utils.runAfterFrames)(2, () => {
           flatListRef.current?.scrollToIndex({
             index: 1,
             animated: false
@@ -517,36 +499,38 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       index = (0, _number.clamp)(index, 0, count - 1);
     }
     setCurrentSafe(index);
+    desiredIndexRef.current = getDisplayIndex(index);
     const queued = nativeQueuedScrollRef.current;
     if (queued && flatListRef.current) {
       nativeQueuedScrollRef.current = null;
       const nextDisplayIndex = getDisplayIndex(queued.index);
-      runAfterFrames(1, () => {
+      (0, _utils.runAfterFrames)(1, () => {
         swipeTo(nextDisplayIndex, queued.animated);
       });
+    } else if (autoplay && enabledState) {
+      startAutoplay();
     }
-  }, [count, displayCount, getDisplayIndex, setCurrentSafe, shouldLoop, slideSizeValue, swipeTo]);
+  }, [clearNativeScrollEndTimer, count, displayCount, getDisplayIndex, setCurrentSafe, shouldLoop, slideSizeValue, swipeTo, autoplay, enabledState, startAutoplay]);
   const handleScrollEnd = (0, _react().useCallback)(event => {
     if (count === 0) return;
     const {
       contentOffset
     } = event.nativeEvent;
-    const offset = vertical ? contentOffset.y : contentOffset.x;
-    handleNativeScrollEndByOffset(offset);
+    handleNativeScrollEndByOffset(vertical ? contentOffset.y : contentOffset.x);
   }, [count, handleNativeScrollEndByOffset, vertical]);
   const handleScrollBeginDrag = () => {
     isDraggingRef.current = true;
     isScrollingRef.current = true;
+    stopAutoplay();
   };
   const handleScrollEndDrag = event => {
     isDraggingRef.current = false;
     const {
       contentOffset
     } = event.nativeEvent;
-    const offset = vertical ? contentOffset.y : contentOffset.x;
-    runAfterFrames(1, () => {
+    (0, _utils.runAfterFrames)(1, () => {
       if (nativeMomentumRef.current) return;
-      handleNativeScrollEndByOffset(offset);
+      handleNativeScrollEndByOffset(vertical ? contentOffset.y : contentOffset.x);
     });
   };
   const handleMomentumScrollBegin = () => {
@@ -555,6 +539,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   };
   const indicatorRafIdRef = (0, _react().useRef)(null);
   const indicatorPendingRef = (0, _react().useRef)(null);
+  const canUseRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
   const flushIndicator = () => {
     const next = indicatorPendingRef.current;
     if (next == null) return;
@@ -564,10 +549,17 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const scheduleIndicator = next => {
     indicatorPendingRef.current = next;
     if (indicatorRafIdRef.current != null) return;
-    indicatorRafIdRef.current = requestAnimationFrame(() => {
+    if (canUseRaf) {
+      indicatorRafIdRef.current = requestAnimationFrame(() => {
+        indicatorRafIdRef.current = null;
+        flushIndicator();
+      });
+      return;
+    }
+    indicatorRafIdRef.current = setTimeout(() => {
       indicatorRafIdRef.current = null;
       flushIndicator();
-    });
+    }, 16);
   };
   (0, _react().useEffect)(() => {
     setIndicatorIndex(prev => {
@@ -578,46 +570,38 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   (0, _react().useEffect)(() => {
     return () => {
       if (indicatorRafIdRef.current != null) {
-        cancelAnimationFrame(indicatorRafIdRef.current);
+        if (canUseRaf) {
+          cancelAnimationFrame(indicatorRafIdRef.current);
+        } else {
+          clearTimeout(indicatorRafIdRef.current);
+        }
         indicatorRafIdRef.current = null;
       }
       indicatorPendingRef.current = null;
     };
   }, []);
   const handleScroll = (0, _react().useCallback)(event => {
-    if (isWeb) return;
-    if (count <= 1) return;
-    if (!slideSizeValue) return;
+    if (isWeb || count <= 1 || !slideSizeValue) return;
     const {
       contentOffset
     } = event.nativeEvent;
     const offset = vertical ? contentOffset.y : contentOffset.x;
-    let displayIndex = Math.round(offset / slideSizeValue);
-    displayIndex = shouldLoop ? (0, _number.clamp)(displayIndex, 0, displayCount - 1) : (0, _number.clamp)(displayIndex, 0, count - 1);
+    const displayIndex = shouldLoop ? (0, _number.clamp)(Math.round(offset / slideSizeValue), 0, displayCount - 1) : (0, _number.clamp)(Math.round(offset / slideSizeValue), 0, count - 1);
     scheduleIndicator(getDisplayIndex(displayIndex));
   }, [count, displayCount, getDisplayIndex, isWeb, scheduleIndicator, shouldLoop, slideSizeValue, vertical]);
   (0, _react().useEffect)(() => {
-    const stop = () => {
-      if (autoplayTimerRef.current) {
-        clearTimeout(autoplayTimerRef.current);
-        autoplayTimerRef.current = null;
-      }
+    onDragStartRef.current = () => {
+      isDraggingRef.current = true;
+      stopAutoplay();
     };
-    if (!autoplay || count <= 1 || !enabledState) {
-      stop();
-      return;
-    }
-    const interval = (0, _validate.isFiniteNumber)(autoplay) ? Math.max(0, autoplay) : 5000;
-    const tick = () => {
-      if (!isDraggingRef.current && !isScrollingRef.current) {
-        swipeNext();
-      }
-      autoplayTimerRef.current = setTimeout(tick, interval);
+    onDragEndRef.current = () => {
+      isDraggingRef.current = false;
     };
-    stop();
-    autoplayTimerRef.current = setTimeout(tick, interval);
-    return stop;
-  }, [autoplay, count, enabledState, swipeNext]);
+  }, [stopAutoplay]);
+  (0, _react().useEffect)(() => {
+    startAutoplay();
+    return stopAutoplay;
+  }, [startAutoplay, stopAutoplay]);
   (0, _react().useImperativeHandle)(ref, () => ({
     activeIndex: getDisplayIndex(current),
     swipeTo: (index, animated = true) => {
@@ -642,22 +626,18 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   }), [current, count, getDisplayIndex, swipeTo, swipeNext, swipePrev]);
   const renderIndicator = () => {
     if (indicator === false || count <= 1) return null;
-    const currentIndex = indicatorIndex;
-    if (typeof indicator === 'function') {
-      return indicator(count, currentIndex);
-    }
+    if (typeof indicator === 'function') return indicator(count, indicatorIndex);
     return /*#__PURE__*/_react().default.createElement(_SwiperPagIndicator.default, _extends({}, indicatorProps, {
       total: count,
-      current: currentIndex,
+      current: indicatorIndex,
       vertical: vertical
     }));
   };
   (0, _react().useEffect)(() => {
     if (!onChange || count <= 0) return;
     const nextDisplay = getDisplayIndex(current);
-    const prevDisplay = currentDisplayIndexRef.current;
-    if (nextDisplay === prevDisplay) return;
-    prevIndexRef.current = prevDisplay;
+    if (nextDisplay === currentDisplayIndexRef.current) return;
+    prevIndexRef.current = currentDisplayIndexRef.current;
     currentDisplayIndexRef.current = nextDisplay;
     onChange(nextDisplay);
   }, [current, onChange, count, getDisplayIndex]);
@@ -665,36 +645,38 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     item,
     index
   }) => {
-    if (item.type === 'child') {
-      const child = validChildren[item.index];
-      if (!child) return null;
-      if (!autoHeightEnabled) {
-        return /*#__PURE__*/_react().default.cloneElement(child, {
-          style: [child.props.style, itemSizeStyle]
-        });
-      }
-      const nextChild = /*#__PURE__*/_react().default.cloneElement(child, {
-        style: [child.props.style, styles.autoHeightChild]
+    const marker = item;
+    if (marker.type !== 'child') return null;
+    const childIndex = typeof marker.index === 'number' ? marker.index : -1;
+    const child = validChildren[childIndex];
+    if (!child) return null;
+    if (!autoHeightEnabled) {
+      const element = child;
+      return /*#__PURE__*/(0, _react().cloneElement)(element, {
+        style: [element.props.style, itemSizeStyle]
       });
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: itemSizeStyle,
-        onLayout: e => handleItemLayout(index, e),
-        collapsable: false
-      }, nextChild);
     }
-    return null;
+    const element = child;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: itemSizeStyle,
+      onLayout: e => handleItemLayout(index, e),
+      collapsable: false
+    }, /*#__PURE__*/(0, _react().cloneElement)(element, {
+      style: [element.props.style, styles.autoHeightChild]
+    }));
   }, [validChildren, itemSizeStyle, autoHeightEnabled, handleItemLayout]);
   const renderDataItem = (0, _react().useCallback)(info => {
     if (!renderItem) return null;
     const item = renderItem(info);
     if (!item) return null;
+    const itemIndex = info.index;
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: itemSizeStyle,
-      onLayout: autoHeightEnabled ? e => handleItemLayout(info.index, e) : undefined,
+      onLayout: autoHeightEnabled ? e => handleItemLayout(itemIndex, e) : undefined,
       collapsable: false
     }, item);
   }, [renderItem, itemSizeStyle, autoHeightEnabled, handleItemLayout]);
-  const getItemKey = (0, _react().useCallback)((item, index) => {
+  const getItemKey = (0, _react().useCallback)((_item, index) => {
     if (shouldLoop && count > 1) {
       if (index === 0) return `loop-last-${count - 1}`;
       if (index === displayCount - 1) return `loop-first-0`;
@@ -711,101 +693,22 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     };
   }, [nonLoopSnapOffsets, shouldLoop, slideSizeValue]);
   const snapToOffsets = (0, _react().useMemo)(() => {
-    if (slideSizePct === 100 && trackOffsetPct === 0) {
-      return undefined; // 使用 snapToInterval
-    }
-    if (!shouldLoop && nonLoopSnapOffsets) {
-      return nonLoopSnapOffsets;
-    }
+    if (slideSizePct === 100 && trackOffsetPct === 0) return undefined;
+    if (!shouldLoop && nonLoopSnapOffsets) return nonLoopSnapOffsets;
     return displayData.map((_, index) => slideSizeValue * index);
   }, [displayData, nonLoopSnapOffsets, shouldLoop, slideSizePct, slideSizeValue, trackOffsetPct]);
-  const panResponder = (0, _react().useMemo)(() => {
-    if (!isWeb) return null;
-    return _reactNative().PanResponder.create({
-      onStartShouldSetPanResponder: () => {
-        const latest = panLatestRef.current;
-        return !!latest.enabledState && !!latest.touchable && latest.count > 1;
-      },
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        const latest = panLatestRef.current;
-        if (!latest.enabledState || !latest.touchable || latest.count <= 1) return false;
-        if (latest.vertical) {
-          return Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
-        }
-        return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
-      },
-      onPanResponderGrant: () => {
-        const latest = panLatestRef.current;
-        if (!latest.enabledState || !latest.touchable || latest.count <= 1) return;
-        panLockRef.current = true;
-        isDraggingRef.current = true;
-        cancelWebRaf();
-        stopWebSnapAnim();
-        startOffsetRef.current = webOffsetRef.current;
-      },
-      onPanResponderMove: (event, gestureState) => {
-        if (!panLockRef.current) return;
-        const latest = panLatestRef.current;
-        if (latest.preventScroll) {
-          ;
-          event.preventDefault?.();
-          event.stopPropagation?.();
-          event.nativeEvent?.preventDefault?.();
-          event.nativeEvent?.stopPropagation?.();
-        }
-        const delta = latest.vertical ? gestureState.dy : gestureState.dx;
-        const nextRaw = startOffsetRef.current + delta;
-        const next = latest.shouldLoop ? (0, _number.clamp)(nextRaw, -latest.maxOffsetLoop, 0) : (0, _number.clamp)(nextRaw, -latest.nonLoopMaxOffset, -latest.nonLoopMinOffset);
-        webOffsetRef.current = next;
-        scheduleWebTranslate(next);
-      },
-      onPanResponderRelease: (_, gestureState) => {
-        const latest = panLatestRef.current;
-        panLockRef.current = false;
-        isDraggingRef.current = false;
-        cancelWebRaf();
-        flushWebTranslate();
-        const distance = latest.vertical ? gestureState.dy : gestureState.dx;
-        const velocity = latest.vertical ? gestureState.vy : gestureState.vx;
-        const dir = velocity !== 0 ? velocity > 0 ? 1 : -1 : distance !== 0 ? distance > 0 ? 1 : -1 : 0;
-        const velocityOffset = Math.min(Math.abs(velocity) * 2000, latest.slideSizeValue) * dir;
-        let targetOffset = startOffsetRef.current + distance + velocityOffset;
-        targetOffset = latest.shouldLoop ? (0, _number.clamp)(targetOffset, -latest.maxOffsetLoop, 0) : (0, _number.clamp)(targetOffset, -latest.nonLoopMaxOffset, -latest.nonLoopMinOffset);
-        const targetIndex = Math.round(-targetOffset / latest.slideSizeValue);
-        const displayIndex = latest.shouldLoop ? (0, _number.clamp)(targetIndex, 0, latest.displayCount - 1) : (0, _number.clamp)(targetIndex, 0, latest.count - 1);
-        const realIndex = latest.shouldLoop ? displayIndex === 0 ? latest.count - 1 : displayIndex === latest.displayCount - 1 ? 0 : displayIndex - 1 : displayIndex;
-        swipeToRef.current(realIndex, true);
-      },
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderTerminate: () => {
-        panLockRef.current = false;
-        isDraggingRef.current = false;
-        cancelWebRaf();
-        stopWebSnapAnim();
-      }
-    });
-  }, [isWeb, webTranslateXAnim, webTranslateYAnim]);
   (0, _react().useEffect)(() => {
     if (!isWeb) return;
     const initialIndex = getInitialIndex();
     const initialOffset = shouldLoop ? -initialIndex * slideSizeValue : -1 * (nonLoopSnapOffsets?.[initialIndex] ?? slideSizeValue * initialIndex);
     webOffsetRef.current = initialOffset;
-    if (vertical) {
-      webTranslateYAnim.setValue(initialOffset);
-    } else {
-      webTranslateXAnim.setValue(initialOffset);
-    }
+    if (vertical) webTranslateYAnim.setValue(initialOffset);else webTranslateXAnim.setValue(initialOffset);
   }, [isWeb, getInitialIndex, nonLoopSnapOffsets, shouldLoop, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim]);
   (0, _react().useEffect)(() => {
-    if (!isWeb) return;
-    if (count === 0) return;
+    if (!isWeb || count === 0) return;
     const offset = shouldLoop ? -currentRef.current * slideSizeValue : -1 * (nonLoopSnapOffsets?.[currentRef.current] ?? slideSizeValue * currentRef.current);
     webOffsetRef.current = offset;
-    if (vertical) {
-      webTranslateYAnim.setValue(offset);
-    } else {
-      webTranslateXAnim.setValue(offset);
-    }
+    if (vertical) webTranslateYAnim.setValue(offset);else webTranslateXAnim.setValue(offset);
   }, [isWeb, count, nonLoopSnapOffsets, shouldLoop, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim]);
   if (count === 0) {
     return null;
@@ -828,20 +731,16 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         height: vertical ? displayCount * slideSizeValue : '100%',
         transform: webTrackTransform
       }]
-    }), displayData.map((item, index) => {
-      const key = getItemKey(item, index);
-      const content = data ? renderDataItem({
-        item,
-        index
-      }) : renderChildItem({
-        item,
-        index
-      });
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        key: key,
-        style: [itemSizeStyle, styles.webSlideWrapper]
-      }, content);
-    }))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    }), displayData.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: getItemKey(item, index),
+      style: [itemSizeStyle, styles.webSlideWrapper]
+    }, data && renderDataItem({
+      item,
+      index
+    }) || renderChildItem({
+      item,
+      index
+    }))))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       pointerEvents: "none",
       style: styles.indicatorOverlay
     }, renderIndicator()));
@@ -863,7 +762,7 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     maxToRenderPerBatch: 3,
     windowSize: 5,
     updateCellsBatchingPeriod: 16,
-    snapToInterval: slideSizePct === 100 && trackOffsetPct === 0 ? slideSizeValue : undefined,
+    snapToInterval: slideSizePct === 100 && trackOffsetPct === 0 && slideSizeValue || undefined,
     snapToOffsets: snapToOffsets,
     snapToAlignment: "start",
     decelerationRate: "fast",
@@ -885,13 +784,10 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onScrollToIndexFailed: info => {
       nativeMomentumRef.current = false;
       isScrollingRef.current = false;
-      runAfterFrames(2, () => {
+      (0, _utils.runAfterFrames)(2, () => {
         try {
           isScrollingRef.current = true;
-          flatListRef.current?.scrollToIndex({
-            index: info.index,
-            animated: false
-          });
+          scrollToIndexSafe(info.index, false);
           setCurrentSafe(info.index);
         } finally {
           isScrollingRef.current = false;
@@ -899,25 +795,26 @@ const Swiper = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
           if (queued && flatListRef.current) {
             nativeQueuedScrollRef.current = null;
             const nextDisplayIndex = getDisplayIndex(queued.index);
-            runAfterFrames(1, () => {
+            (0, _utils.runAfterFrames)(1, () => {
               swipeTo(nextDisplayIndex, queued.animated);
             });
           }
         }
       });
     },
-    style: isWeb ? {
+    style: isWeb && {
       cursor: 'grab'
-    } : undefined,
-    contentContainerStyle: [isWeb ? {
+    } || undefined,
+    contentContainerStyle: [isWeb && {
       userSelect: 'none'
-    } : undefined, !isWeb ? nativeTrackContentPaddingStyle : undefined],
+    } || undefined, !isWeb && nativeTrackContentPaddingStyle || undefined],
     testID: `${testID}-flatlist`
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "none",
     style: styles.indicatorOverlay
   }, renderIndicator()));
-});
+};
+const Swiper = /*#__PURE__*/(0, _react().forwardRef)(SwiperImpl);
 Swiper.displayName = 'Swiper';
 const styles = _reactNative().StyleSheet.create({
   container: {