@xhsreds/reds-rn-next 0.9.1-beta202510291556 → 0.9.1-feat-swiper202511031535

package/lib/src/components/Swiper/LazyPage.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { LazyPageProps } from "./types";
+/**
+ * LazyPage component that conditionally mounts/unmounts content
+ * based on proximity to current page
+ */
+export declare const LazyPage: React.FC<LazyPageProps>;

package/lib/src/components/Swiper/Swiper.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const Swiper: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/src/components/Swiper/SwiperFlatList.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const SwiperFlatList: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/src/components/Swiper/SwiperPagerView.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const SwiperPagerView: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/src/components/Swiper/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Swiper - A performant, data-driven carousel component
+ *
+ * @example
+ * ```tsx
+ * import { Swiper, SwiperRef } from '@/components/Swiper'
+ *
+ * const swiperRef = useRef<SwiperRef>(null)
+ *
+ * <Swiper
+ *   ref={swiperRef}
+ *   data={items}
+ *   renderItem={(item, index) => <ItemCard item={item} />}
+ *   infinite
+ *   onPageChange={(index) => console.log('Page:', index)}
+ * />
+ *
+ * // Programmatic control
+ * swiperRef.current?.next()
+ * swiperRef.current?.goToPage(5)
+ * ```
+ */
+export { Swiper } from "./Swiper";
+export type { SwiperProps, SwiperRef } from "./types";

package/lib/src/components/Swiper/types.d.ts

@@ -0,0 +1,166 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+/**
+ * Props for the Swiper component
+ */
+export interface SwiperProps<T> {
+    /** Array of data items to render */
+    data: T[];
+    /** Function to render each item */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Optional key extractor for list items */
+    keyExtractor?: (item: T, index: number) => string;
+    /** Enable infinite/loop scrolling */
+    infinite?: boolean;
+    /** Initial page index to display */
+    initialPage?: number;
+    /**
+     * Choose implementation: 'pagerView' or 'flatlist'
+     *
+     * PagerView (default):
+     * - Native ViewPager (Android) / UIPageViewController (iOS)
+     * - Smooth 60fps gestures
+     * - Better UX for small-medium datasets
+     *
+     * FlatList:
+     * - Built-in virtualization (better for large datasets)
+     * - removeClippedSubviews support
+     * - More predictable behavior across platforms
+     *
+     * Default: 'pagerView'
+     */
+    implementation?: "pagerView" | "flatlist";
+    /**
+     * Number of items to clone on each end for infinite scroll (default: 2)
+     *
+     * Can be set larger than array length for maximum buffering.
+     * Higher values = smoother fast scrolling, but more memory usage.
+     *
+     * Examples:
+     * - cloneCount=2: Default, good for most cases
+     * - cloneCount=5-10: Better for fast scrolling
+     * - cloneCount=20+: Maximum buffer for very fast scrolling
+     */
+    cloneCount?: number;
+    /**
+     * Number of pages to mount on each side of current page (default: 2)
+     *
+     * Note: When cloneCount is large, the effective mount window will
+     * automatically scale up to prevent blank pages during fast scrolling.
+     * Effective window = max(lazyMountWindow, cloneCount/10, capped at 10)
+     */
+    lazyMountWindow?: number;
+    /**
+     * Enable aggressive memory management by unmounting pages far from current position
+     *
+     * When true, pages beyond unmountThreshold will be unmounted to free memory.
+     * When false (default), pages stay mounted once loaded for better UX.
+     *
+     * Recommended: true for large datasets with heavy content (images/videos)
+     */
+    removeClippedPages?: boolean;
+    /**
+     * Distance from current page before unmounting (default: lazyMountWindow * 3)
+     * Only applies when removeClippedPages is true
+     */
+    unmountThreshold?: number;
+    /** Callback when page changes */
+    onPageChange?: (index: number) => void;
+    /** Callback when swiping to next page */
+    onNext?: (index: number) => void;
+    /** Callback when swiping to previous page */
+    onPrev?: (index: number) => void;
+    /** Callback when scroll state changes */
+    onPageScrollStateChanged?: (state: "idle" | "dragging" | "settling") => void;
+    /**
+     * Callback when user releases drag (before momentum scroll begins)
+     *
+     * FlatList implementation only.
+     * Fires when user lifts finger after dragging, before momentum animation starts.
+     * Useful for immediate UI updates (e.g., updating active indicator)
+     * while deferring expensive operations (e.g., data fetching) to onPageChange.
+     *
+     * @param index - The page index where drag ended (real index, not display index)
+     *
+     * @example
+     * <Swiper
+     *   implementation="flatlist"
+     *   onScrollEndDrag={(index) => updateActiveIndex(index)}  // Fast UI update
+     *   onPageChange={(index) => fetchData(index)}             // Slower data fetch
+     * />
+     */
+    onScrollEndDrag?: (index: number) => void;
+    /** Style for the pager container */
+    style?: StyleProp<ViewStyle>;
+    /** Margin between pages (Android only) */
+    pageMargin?: number;
+    /** Enable/disable scrolling */
+    scrollEnabled?: boolean;
+    /** Allow overdrag effect */
+    overdrag?: boolean;
+    /**
+     * Number of pages to keep off-screen on each side (Android only)
+     *
+     * This is a NATIVE Android API that destroys/recreates views automatically.
+     * More efficient than our JS-based removeClippedPages approach.
+     *
+     * Note: iOS doesn't support this - all pages stay in memory on iOS
+     *
+     * Examples:
+     * - offscreenPageLimit=1: Keep 1 page on each side (3 total in memory)
+     * - offscreenPageLimit=2: Keep 2 pages on each side (5 total in memory)
+     *
+     * Default: Android default is 1, but PagerView doesn't set a default
+     */
+    offscreenPageLimit?: number;
+    /** Custom placeholder component for unmounted pages */
+    renderPlaceholder?: (index: number) => ReactNode;
+}
+/**
+ * Ref methods exposed by Swiper component
+ */
+export interface SwiperRef {
+    /** Navigate to specific page */
+    goToPage: (index: number, animated?: boolean) => void;
+    /** Go to next page */
+    next: (animated?: boolean) => void;
+    /** Go to previous page */
+    prev: (animated?: boolean) => void;
+    /** Get current page index */
+    getCurrentPage: () => number;
+}
+/**
+ * Props for LazyPage component
+ */
+export interface LazyPageProps {
+    /** Whether this page should be mounted */
+    shouldMount: boolean;
+    /** Whether this page should be unmounted if far away */
+    shouldUnmount?: boolean;
+    /** Content to render when mounted */
+    children: ReactNode;
+    /** Optional placeholder when not mounted */
+    placeholder?: ReactNode;
+    /** Style for page container */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Return type for infinite data preparation
+ */
+export interface InfiniteDataResult<T> {
+    /** Data array with clones added */
+    displayData: T[];
+    /** Offset where real data starts */
+    offset: number;
+    /** Number of clones on each side */
+    cloneCount: number;
+}
+/**
+ * Return type for jump calculation
+ */
+export interface JumpResult {
+    /** Whether a jump is needed */
+    shouldJump: boolean;
+    /** Target index to jump to (if shouldJump is true) */
+    jumpTo?: number;
+}

package/lib/src/components/Swiper/utils.d.ts

@@ -0,0 +1,42 @@
+import type { InfiniteDataResult, JumpResult } from "./types";
+/**
+ * Prepare data array for infinite scrolling by cloning boundary items
+ *
+ * @param data Original data array
+ * @param infinite Whether infinite scroll is enabled
+ * @param cloneCount Number of items to clone on each end (default: 2)
+ *                   Can exceed data.length - will repeat entire array multiple times
+ * @returns Object with displayData (with clones), offset, and cloneCount
+ *
+ * @example
+ * // With data=[A,B,C] and cloneCount=2: [B,C,A,B,C,A,B]
+ * // With data=[A,B,C] and cloneCount=5: [A,B,C,A,B,C,A,B,C,A,B]
+ */
+export declare function prepareInfiniteData<T>(data: T[], infinite: boolean, cloneCount?: number): InfiniteDataResult<T>;
+/**
+ * Calculate if a jump is needed after page change for infinite scroll
+ *
+ * @param newPage Current display page index
+ * @param dataLength Length of original data array
+ * @param offset Offset where real data starts
+ * @param cloneCount Number of clones on each side
+ * @returns Object indicating if jump is needed and target index
+ */
+export declare function shouldJumpForInfinite(newPage: number, dataLength: number, offset: number, cloneCount: number): JumpResult;
+/**
+ * Convert display index to real data index
+ *
+ * @param displayIndex Index in the display array (with clones)
+ * @param offset Offset where real data starts
+ * @param dataLength Length of original data array
+ * @returns Real index in original data array
+ */
+export declare function getRealIndex(displayIndex: number, offset: number, dataLength: number): number;
+/**
+ * Get display index from real data index
+ *
+ * @param realIndex Index in original data array
+ * @param offset Offset where real data starts
+ * @returns Display index in display array (with clones)
+ */
+export declare function getDisplayIndex(realIndex: number, offset: number): number;

package/lib/src/index.d.ts

@@ -55,4 +55,5 @@ export * from "./components/SlimAlert";
 export * from "./components/SlimNavigationBar";
 export * from "./components/Search";
 export * from "./components/ActionablePopover";
+export * from "./components/Swiper";
 import "react-native-url-polyfill/auto";

package/lib/types/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RedsPopover } from "./interface/index";
-declare const _default: ({ mode, opacity, content, children, isControl, placement, closeOnClickAgain, trigger, zIndex, visible, onVisibleChange, onClickMask: _onClickMask, popContainerStyle, arrowStyles: propsArrowStyles, offset, duration, animation_duration, hostName, maxWidth, arrowOffset, }: RedsPopover) => React.JSX.Element;
+declare const _default: ({ mode, opacity, content, children, isControl, placement, closeOnClickAgain, trigger, zIndex, visible, onVisibleChange, onClickMask: _onClickMask, popContainerStyle, arrowStyles: propsArrowStyles, offset, duration, hostName, maxWidth, arrowOffset, }: RedsPopover) => React.JSX.Element;
 export default _default;

package/lib/types/components/Popover/interface/index.d.ts

@@ -12,7 +12,6 @@ export interface RedsPopover {
     mode?: "light" | "dark" | "alwaysLight" | "alwaysDark";
     trigger?: "click" | "touch";
     duration?: number;
-    animation_duration?: number;
     zIndex?: number;
     popContainerStyle?: ViewStyle;
     closeOnClickAgain?: boolean;

package/lib/types/components/Swiper/LazyPage.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { LazyPageProps } from "./types";
+/**
+ * LazyPage component that conditionally mounts/unmounts content
+ * based on proximity to current page
+ */
+export declare const LazyPage: React.FC<LazyPageProps>;

package/lib/types/components/Swiper/Swiper.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const Swiper: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/types/components/Swiper/SwiperFlatList.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const SwiperFlatList: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/types/components/Swiper/SwiperPagerView.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+export declare const SwiperPagerView: <T>(props: SwiperProps<T> & {
+    ref?: React.Ref<SwiperRef>;
+}) => React.ReactElement;

package/lib/types/components/Swiper/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Swiper - A performant, data-driven carousel component
+ *
+ * @example
+ * ```tsx
+ * import { Swiper, SwiperRef } from '@/components/Swiper'
+ *
+ * const swiperRef = useRef<SwiperRef>(null)
+ *
+ * <Swiper
+ *   ref={swiperRef}
+ *   data={items}
+ *   renderItem={(item, index) => <ItemCard item={item} />}
+ *   infinite
+ *   onPageChange={(index) => console.log('Page:', index)}
+ * />
+ *
+ * // Programmatic control
+ * swiperRef.current?.next()
+ * swiperRef.current?.goToPage(5)
+ * ```
+ */
+export { Swiper } from "./Swiper";
+export type { SwiperProps, SwiperRef } from "./types";

package/lib/types/components/Swiper/types.d.ts

@@ -0,0 +1,166 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+/**
+ * Props for the Swiper component
+ */
+export interface SwiperProps<T> {
+    /** Array of data items to render */
+    data: T[];
+    /** Function to render each item */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Optional key extractor for list items */
+    keyExtractor?: (item: T, index: number) => string;
+    /** Enable infinite/loop scrolling */
+    infinite?: boolean;
+    /** Initial page index to display */
+    initialPage?: number;
+    /**
+     * Choose implementation: 'pagerView' or 'flatlist'
+     *
+     * PagerView (default):
+     * - Native ViewPager (Android) / UIPageViewController (iOS)
+     * - Smooth 60fps gestures
+     * - Better UX for small-medium datasets
+     *
+     * FlatList:
+     * - Built-in virtualization (better for large datasets)
+     * - removeClippedSubviews support
+     * - More predictable behavior across platforms
+     *
+     * Default: 'pagerView'
+     */
+    implementation?: "pagerView" | "flatlist";
+    /**
+     * Number of items to clone on each end for infinite scroll (default: 2)
+     *
+     * Can be set larger than array length for maximum buffering.
+     * Higher values = smoother fast scrolling, but more memory usage.
+     *
+     * Examples:
+     * - cloneCount=2: Default, good for most cases
+     * - cloneCount=5-10: Better for fast scrolling
+     * - cloneCount=20+: Maximum buffer for very fast scrolling
+     */
+    cloneCount?: number;
+    /**
+     * Number of pages to mount on each side of current page (default: 2)
+     *
+     * Note: When cloneCount is large, the effective mount window will
+     * automatically scale up to prevent blank pages during fast scrolling.
+     * Effective window = max(lazyMountWindow, cloneCount/10, capped at 10)
+     */
+    lazyMountWindow?: number;
+    /**
+     * Enable aggressive memory management by unmounting pages far from current position
+     *
+     * When true, pages beyond unmountThreshold will be unmounted to free memory.
+     * When false (default), pages stay mounted once loaded for better UX.
+     *
+     * Recommended: true for large datasets with heavy content (images/videos)
+     */
+    removeClippedPages?: boolean;
+    /**
+     * Distance from current page before unmounting (default: lazyMountWindow * 3)
+     * Only applies when removeClippedPages is true
+     */
+    unmountThreshold?: number;
+    /** Callback when page changes */
+    onPageChange?: (index: number) => void;
+    /** Callback when swiping to next page */
+    onNext?: (index: number) => void;
+    /** Callback when swiping to previous page */
+    onPrev?: (index: number) => void;
+    /** Callback when scroll state changes */
+    onPageScrollStateChanged?: (state: "idle" | "dragging" | "settling") => void;
+    /**
+     * Callback when user releases drag (before momentum scroll begins)
+     *
+     * FlatList implementation only.
+     * Fires when user lifts finger after dragging, before momentum animation starts.
+     * Useful for immediate UI updates (e.g., updating active indicator)
+     * while deferring expensive operations (e.g., data fetching) to onPageChange.
+     *
+     * @param index - The page index where drag ended (real index, not display index)
+     *
+     * @example
+     * <Swiper
+     *   implementation="flatlist"
+     *   onScrollEndDrag={(index) => updateActiveIndex(index)}  // Fast UI update
+     *   onPageChange={(index) => fetchData(index)}             // Slower data fetch
+     * />
+     */
+    onScrollEndDrag?: (index: number) => void;
+    /** Style for the pager container */
+    style?: StyleProp<ViewStyle>;
+    /** Margin between pages (Android only) */
+    pageMargin?: number;
+    /** Enable/disable scrolling */
+    scrollEnabled?: boolean;
+    /** Allow overdrag effect */
+    overdrag?: boolean;
+    /**
+     * Number of pages to keep off-screen on each side (Android only)
+     *
+     * This is a NATIVE Android API that destroys/recreates views automatically.
+     * More efficient than our JS-based removeClippedPages approach.
+     *
+     * Note: iOS doesn't support this - all pages stay in memory on iOS
+     *
+     * Examples:
+     * - offscreenPageLimit=1: Keep 1 page on each side (3 total in memory)
+     * - offscreenPageLimit=2: Keep 2 pages on each side (5 total in memory)
+     *
+     * Default: Android default is 1, but PagerView doesn't set a default
+     */
+    offscreenPageLimit?: number;
+    /** Custom placeholder component for unmounted pages */
+    renderPlaceholder?: (index: number) => ReactNode;
+}
+/**
+ * Ref methods exposed by Swiper component
+ */
+export interface SwiperRef {
+    /** Navigate to specific page */
+    goToPage: (index: number, animated?: boolean) => void;
+    /** Go to next page */
+    next: (animated?: boolean) => void;
+    /** Go to previous page */
+    prev: (animated?: boolean) => void;
+    /** Get current page index */
+    getCurrentPage: () => number;
+}
+/**
+ * Props for LazyPage component
+ */
+export interface LazyPageProps {
+    /** Whether this page should be mounted */
+    shouldMount: boolean;
+    /** Whether this page should be unmounted if far away */
+    shouldUnmount?: boolean;
+    /** Content to render when mounted */
+    children: ReactNode;
+    /** Optional placeholder when not mounted */
+    placeholder?: ReactNode;
+    /** Style for page container */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Return type for infinite data preparation
+ */
+export interface InfiniteDataResult<T> {
+    /** Data array with clones added */
+    displayData: T[];
+    /** Offset where real data starts */
+    offset: number;
+    /** Number of clones on each side */
+    cloneCount: number;
+}
+/**
+ * Return type for jump calculation
+ */
+export interface JumpResult {
+    /** Whether a jump is needed */
+    shouldJump: boolean;
+    /** Target index to jump to (if shouldJump is true) */
+    jumpTo?: number;
+}

package/lib/types/components/Swiper/utils.d.ts

@@ -0,0 +1,42 @@
+import type { InfiniteDataResult, JumpResult } from "./types";
+/**
+ * Prepare data array for infinite scrolling by cloning boundary items
+ *
+ * @param data Original data array
+ * @param infinite Whether infinite scroll is enabled
+ * @param cloneCount Number of items to clone on each end (default: 2)
+ *                   Can exceed data.length - will repeat entire array multiple times
+ * @returns Object with displayData (with clones), offset, and cloneCount
+ *
+ * @example
+ * // With data=[A,B,C] and cloneCount=2: [B,C,A,B,C,A,B]
+ * // With data=[A,B,C] and cloneCount=5: [A,B,C,A,B,C,A,B,C,A,B]
+ */
+export declare function prepareInfiniteData<T>(data: T[], infinite: boolean, cloneCount?: number): InfiniteDataResult<T>;
+/**
+ * Calculate if a jump is needed after page change for infinite scroll
+ *
+ * @param newPage Current display page index
+ * @param dataLength Length of original data array
+ * @param offset Offset where real data starts
+ * @param cloneCount Number of clones on each side
+ * @returns Object indicating if jump is needed and target index
+ */
+export declare function shouldJumpForInfinite(newPage: number, dataLength: number, offset: number, cloneCount: number): JumpResult;
+/**
+ * Convert display index to real data index
+ *
+ * @param displayIndex Index in the display array (with clones)
+ * @param offset Offset where real data starts
+ * @param dataLength Length of original data array
+ * @returns Real index in original data array
+ */
+export declare function getRealIndex(displayIndex: number, offset: number, dataLength: number): number;
+/**
+ * Get display index from real data index
+ *
+ * @param realIndex Index in original data array
+ * @param offset Offset where real data starts
+ * @returns Display index in display array (with clones)
+ */
+export declare function getDisplayIndex(realIndex: number, offset: number): number;

package/lib/types/index.d.ts

@@ -55,4 +55,5 @@ export * from "./components/SlimAlert";
 export * from "./components/SlimNavigationBar";
 export * from "./components/Search";
 export * from "./components/ActionablePopover";
+export * from "./components/Swiper";
 import "react-native-url-polyfill/auto";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.9.1-beta202510291556",
+  "version": "0.9.1-feat-swiper202511031535",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -24,9 +24,10 @@
     "react": "*",
     "react-native": "*",
     "react-native-fs": "2.20.0",
+    "react-native-pager-view": ">=6.0.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
-    "@xhsreds/reds-token-next": "0.9.1-beta202510291556"
+    "@xhsreds/reds-token-next": "0.9.0"
   },
   "peerDependenciesMeta": {
     "ozone-schema-web": {

package/src/components/Carousel/Carousel.tsx

@@ -238,8 +238,8 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
 
     requestAnimationFrame(() => {
       let scrollOffset = index * offsetPerItem;
-      // 修复：只有在无限循环模式下才需要减去containerPadding
-      if (props.playingMode !== "normal" && props.infinite) {
+
+      if (props.playingMode !== "normal") {
         scrollOffset -= containerPadding;
       }
 
@@ -287,18 +287,10 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
       props.direction === "horizontal" ? event.nativeEvent.contentOffset.x : event.nativeEvent.contentOffset.y;
 
     let index: number;
-    // 修复：对于非无限循环的compact模式，需要调整偏移量计算
     if (props.playingMode === "normal") {
       index = Math.round(offset / offsetPerItem);
     } else {
-      // 对于compact和card模式
-      if (!props.infinite) {
-        // 非无限循环模式：不需要加containerPadding，因为滚动时已经考虑了padding
-        index = Math.round(offset / offsetPerItem);
-      } else {
-        // 无限循环模式：需要加containerPadding
-        index = Math.round((offset + containerPadding) / offsetPerItem);
-      }
+      index = Math.round((offset + containerPadding) / offsetPerItem);
     }
 
     index = Math.max(0, Math.min(index, extendedData.length - 1));
@@ -320,10 +312,6 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
       const clampedIndex = Math.max(0, Math.min(index, length - 1));
       setCurrentIndex(clampedIndex);
       setRealIndex(clampedIndex);
-      // 修复：确保滚动到正确位置
-      if (props.playingMode !== "normal") {
-        scrollToIndex(clampedIndex, true);
-      }
     }
 
     setIsScrolling(false);

package/src/components/Carousel/demo/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, ScrollView, Image as RNImage } from "react-native";
-import { Carousel, CarouselType } from "@xhs/reds-rn-next";
+import { Carousel } from "@xhs/reds-rn-next";
 const styles = StyleSheet.create({
   container: {
     paddingBottom: 100,
@@ -54,18 +54,6 @@ export default function App() {
         handlable={false}
       />
       <Carousel
-        data={images}
-        autoPlay={false}
-        currentIndex={3}
-        onChange={handleChange}
-        onClick={handleClick}
-        displayNumbers={true}
-        // duration={3000}
-        playingMode={CarouselType.PLAYINGMODE.COMPACT}
-        handlable={true}
-        infinite={false}
-      />
-      {/* <Carousel
         autoPlay={true}
         currentIndex={3}
         onChange={handleChange}
@@ -94,7 +82,7 @@ export default function App() {
         {images.map((item, idx) => (
           <RNImage style={{ width: 300, height: 200 }} source={{ uri: item }} />
         ))}
-      </Carousel> */}
+      </Carousel>
       {/* <Desc>自动播放（默认轮播间隔1000ms）</Desc>
       <Carousel data={images} duration={3000} />