Installation

yarn add --dev @dfeidao/fd-m000013

fd-m000013 图片缩放

必须传入 imageUrls

import ImageViewer from '@dfeidao/fd-m000013';

<ImageViewer
	imageUrls={[
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }
	]}
/>

Installation

yarn add --dev @dfeidao/fd-m000013

Attributes

show?: boolean;

是否显示

imageUrls: IImageInfo[];

图片数组

flipThreshold?: number;

滑动到下一页的X阈值,必须滑动到这个值才会到下一页

maxOverflow?: number;

当前页能滑到下一页X位置最大值,最大能滑动的位置

index?: number;

初始显示第几张图

failImageSource?: IImageInfo;

加载失败的图

backgroundColor?: string;

背景颜色

footerContainerStyle?: object;

页脚样式

saveToLocalByLongPress?: boolean;

是否开启长按保存到本地的功能

enableImageZoom?: boolean;

是否允许缩放图片

style?: ViewStyle;

控件样式

enableSwipeDown?: boolean;

向下滑动可关闭图像查看器。 向下滑动时，会触发onCancel。

swipeDownThreshold?: number;

触发向下滑动功能的阈值

doubleClickInterval?: number;

双击间隔

enablePreload?: boolean;

是否预加载图片

pageAnimateTime?: number;

翻页时的动画时间

onLongPress?: (image?: IImageInfo) => void;

长按图片的回调

onClick?: (close?: () => any, currentShowIndex?: number) => void;

单击回调

onDoubleClick?: (close?: () => any) => void;

双击回调

onSave?: (url: string) => void;

图片保存到本地方法，如果写了这个方法，就不会调取系统默认方法

onMove?: (position?: IOnMove) => void;

报告移动位置数据（有助于构建叠加层）

renderHeader?: (currentIndex?: number) => React.ReactElement;

自定义头部

renderFooter?: (currentIndex: number) => React.ReactElement;

自定义尾部

renderIndicator?: (currentIndex?: number, allSize?: number) => React.ReactElement;

自定义计时器

renderImage?: (props: any) => React.ReactElement;

自定义图像

renderArrowLeft?: () => React.ReactElement;

自定义左翻页按钮

renderArrowRight?: () => React.ReactElement;

自定义右翻页按钮

onShowModal?: (content?: any) => void;

弹出大图的回调

onCancel?: () => void;

取消看图的回调

onSwipeDown?: () => void;

向下滑动回调

loadingRender?: () => React.ReactElement;

渲染loading元素

onSaveToCamera?: (index?: number) => void;

保存到相册的回调

onChange?: (index?: number) => void;

当图片切换时触发

完整使用示例

<ImageViewer
	imageUrls={[
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },
		{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }
	]}
/>