import type { ReactNode } from 'react'; import type { ViewStyle, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native'; /** 媒体类型 */ export type MediaType = 'image' | 'video'; /** 轮播项数据 */ export interface SwiperItem { /** 唯一标识 */ id: string | number; /** 媒体类型,自动根据 image/video 字段推断,也可显式指定 */ type?: MediaType; /** 图片地址 */ image?: string | ImageSourcePropType; /** 标题 */ title?: string; /** 副标题/描述 */ subtitle?: string; /** 链接 */ link?: string; /** 视频地址 */ video?: string; /** 视频封面图 */ videoPoster?: string | ImageSourcePropType; /** 视频时长(秒) */ videoDuration?: number; /** 自定义数据 */ extra?: Record; } /** 指示器类型 */ export type IndicatorType = 'dot' | 'line' | 'number' | 'progress' | 'none'; /** 指示器位置 */ export type IndicatorPosition = 'bottom' | 'top' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'; /** 轮播模式 */ export type SwiperMode = 'default' | 'card' | 'stack' | 'fade'; /** 箭头按钮位置 */ export type ArrowPosition = 'inside' | 'outside' | 'bottom'; /** 指示器配置 */ export interface IndicatorConfig { /** 指示器类型 */ type?: IndicatorType; /** 位置 */ position?: IndicatorPosition; /** 激活颜色 */ activeColor?: string; /** 非激活颜色 */ inactiveColor?: string; /** 点大小(dot类型) */ dotSize?: number; /** 激活点宽度(dot类型可设置激活时变长) */ activeDotWidth?: number; /** 线条宽度(line类型) */ lineWidth?: number; /** 线条高度 */ lineHeight?: number; /** 间距 */ gap?: number; /** 距离边缘的偏移量 */ offset?: number; /** 自定义样式 */ style?: ViewStyle; } /** 箭头配置 */ export interface ArrowConfig { /** 是否显示箭头 */ show?: boolean; /** 箭头位置 */ position?: ArrowPosition; /** 箭头大小 */ size?: number; /** 箭头颜色 */ color?: string; /** 箭头背景色 */ backgroundColor?: string; /** 箭头圆角 */ borderRadius?: number; /** 自定义左箭头 */ leftIcon?: ReactNode; /** 自定义右箭头 */ rightIcon?: ReactNode; } /** 卡片模式配置 */ export interface CardModeConfig { /** 卡片间距 */ cardGap?: number; /** 侧边卡片可见宽度 */ sideCardWidth?: number; /** 侧边卡片缩放比例 */ sideCardScale?: number; /** 侧边卡片透明度 */ sideCardOpacity?: number; } /** 自动播放配置 */ export interface AutoplayConfig { /** 是否自动播放 */ enabled?: boolean; /** 播放间隔(毫秒) */ interval?: number; /** 触摸时暂停 */ pauseOnTouch?: boolean; /** 离开视口时暂停 */ pauseOnInactive?: boolean; /** 播放方向:正向/反向 */ direction?: 'forward' | 'backward'; } /** 视频播放配置 */ export interface VideoConfig { /** 是否自动播放当前视频 */ autoPlay?: boolean; /** 是否静音 */ muted?: boolean; /** 是否循环播放 */ loop?: boolean; /** 是否显示控制栏 */ showControls?: boolean; /** 切换时暂停视频 */ pauseOnSwipe?: boolean; /** 切换时是否重置视频进度 */ resetOnSwipe?: boolean; /** 视频缩放模式 */ resizeMode?: 'contain' | 'cover' | 'stretch'; /** 播放图标 */ playIcon?: ReactNode; /** 暂停图标 */ pauseIcon?: ReactNode; /** 视频容器样式 */ containerStyle?: ViewStyle; /** 视频开始播放回调 */ onPlay?: (item: SwiperItem, index: number) => void; /** 视频暂停回调 */ onPause?: (item: SwiperItem, index: number) => void; /** 视频播放结束回调 */ onEnd?: (item: SwiperItem, index: number) => void; /** 视频加载错误回调 */ onError?: (item: SwiperItem, index: number, error: any) => void; } /** 预览配置 */ export interface PreviewConfig { /** 是否启用点击预览 */ enabled?: boolean; /** 预览时是否显示指示器 */ showIndicator?: boolean; /** 指示器类型 */ indicatorType?: 'dots' | 'fraction'; /** 是否显示关闭按钮 */ showCloseButton?: boolean; /** 是否显示保存按钮 */ showSaveButton?: boolean; /** 背景色 */ backgroundColor?: string; /** 保存图片回调 */ onSave?: (item: SwiperItem, index: number) => void; /** 长按回调 */ onLongPress?: (item: SwiperItem, index: number) => void; } /** 轮播图组件属性 */ export interface DbSwiperProps { /** 轮播数据 */ data: SwiperItem[]; /** 宽度 */ width?: number | string; /** 高度 */ height?: number; /** 圆角 */ borderRadius?: number; /** 容器样式 */ style?: ViewStyle; /** 轮播模式 */ mode?: SwiperMode; /** 卡片模式配置 */ cardModeConfig?: CardModeConfig; /** 是否垂直方向 */ vertical?: boolean; /** 自动播放配置(布尔值或详细配置) */ autoplay?: boolean | AutoplayConfig; /** 是否循环播放 */ loop?: boolean; /** 初始索引 */ initialIndex?: number; /** 是否可滑动 */ swipeable?: boolean; /** 滑动灵敏度 */ sensitivity?: number; /** 指示器配置 */ indicator?: boolean | IndicatorConfig; /** 箭头配置 */ arrows?: boolean | ArrowConfig; /** 动画时长(毫秒) */ duration?: number; /** 是否启用动画 */ animated?: boolean; /** 视频播放配置 */ videoConfig?: VideoConfig; /** 自定义渲染视频 */ renderVideo?: (item: SwiperItem, index: number, isActive: boolean, videoRef: React.RefObject) => ReactNode; /** 点击预览配置(布尔值或详细配置) */ previewOnPress?: boolean | PreviewConfig; /** 自定义渲染项 */ renderItem?: (item: SwiperItem, index: number, isActive: boolean) => ReactNode; /** 自定义渲染图片 */ renderImage?: (item: SwiperItem, index: number) => ReactNode; /** 自定义渲染标题区域 */ renderTitle?: (item: SwiperItem, index: number) => ReactNode; /** 自定义渲染指示器 */ renderIndicator?: (currentIndex: number, total: number) => ReactNode; /** 图片缩放模式 */ resizeMode?: 'cover' | 'contain' | 'stretch' | 'center'; /** 图片加载占位 */ placeholder?: ReactNode; /** 图片加载失败占位 */ errorPlaceholder?: ReactNode; /** 图片样式 */ imageStyle?: ImageStyle; /** 是否显示标题 */ showTitle?: boolean; /** 标题位置 */ titlePosition?: 'inside' | 'outside'; /** 标题样式 */ titleStyle?: TextStyle; /** 副标题样式 */ subtitleStyle?: TextStyle; /** 标题容器样式 */ titleContainerStyle?: ViewStyle; /** 点击事件 */ onPress?: (item: SwiperItem, index: number) => void; /** 长按事件 */ onLongPress?: (item: SwiperItem, index: number) => void; /** 索引变化 */ onChange?: (index: number, item: SwiperItem) => void; /** 滑动开始 */ onScrollStart?: () => void; /** 滑动结束 */ onScrollEnd?: (index: number) => void; /** 是否懒加载 */ lazyLoad?: boolean; /** 预加载数量 */ preloadCount?: number; /** 测试ID */ testID?: string; } /** 组件引用方法 */ export interface DbSwiperRef { /** 跳转到指定索引 */ goTo: (index: number, animated?: boolean) => void; /** 下一页 */ next: (animated?: boolean) => void; /** 上一页 */ prev: (animated?: boolean) => void; /** 开始自动播放 */ startAutoplay: () => void; /** 停止自动播放 */ stopAutoplay: () => void; /** 获取当前索引 */ getCurrentIndex: () => number; /** 播放当前视频 */ playVideo: () => void; /** 暂停当前视频 */ pauseVideo: () => void; /** 停止所有视频 */ stopAllVideos: () => void; /** 打开预览 */ openPreview: (index?: number) => void; /** 关闭预览 */ closePreview: () => void; }