react-native-image-zoom-viewer
- Version 3.0.1
- Published
- 117 kB
- 1 dependency
- MIT license
Install
npm i react-native-image-zoom-viewer
yarn add react-native-image-zoom-viewer
pnpm add react-native-image-zoom-viewer
Overview
react native image viewer,大图浏览
Index
Classes
ImageViewer
- componentDidMount()
- componentDidUpdate()
- defaultProps
- getContent()
- getDerivedStateFromProps()
- getMenu()
- goBack
- goNext
- handleCancel
- handleClick
- handleDoubleClick
- handleHorizontalOuterRangeOffset
- handleLayout
- handleLeaveMenu
- handleLongPress
- handleResponderRelease
- handleSwipeDown
- init()
- jumpToCurrentImage()
- loadImage()
- preloadImage
- render()
- resetImageByIndex
- resetPosition()
- saveToLocal
- state
ImageViewerPropsDefine
- backgroundColor
- doubleClickInterval
- enableImageZoom
- enablePreload
- enableSwipeDown
- failImageSource
- flipThreshold
- footerContainerStyle
- imageUrls
- index
- loadingRender
- maxOverflow
- maxScale
- menuContext
- menus
- minScale
- onCancel
- onChange
- onClick
- onDoubleClick
- onLongPress
- onMove
- onSave
- onSaveToCamera
- onShowModal
- onSwipeDown
- pageAnimateTime
- renderArrowLeft
- renderArrowRight
- renderFooter
- renderHeader
- renderImage
- renderIndicator
- saveToLocalByLongPress
- show
- style
- swipeDownThreshold
- useNativeDriver
Classes
class ImageViewer
class ImageViewer extends React.Component<Props, State> {}
property defaultProps
static defaultProps: Props;
property goBack
goBack: () => void;
到上一张
property goNext
goNext: () => void;
到下一张
property handleCancel
handleCancel: () => void;
退出
property handleClick
handleClick: () => void;
单击
property handleDoubleClick
handleDoubleClick: () => void;
双击
property handleHorizontalOuterRangeOffset
handleHorizontalOuterRangeOffset: (offsetX?: number) => void;
触发溢出水平滚动
property handleLayout
handleLayout: (event: any) => void;
完成布局
property handleLeaveMenu
handleLeaveMenu: () => void;
property handleLongPress
handleLongPress: (image: IImageInfo) => void;
长按
property handleResponderRelease
handleResponderRelease: (vx?: number) => void;
手势结束,但是没有取消浏览大图
property handleSwipeDown
handleSwipeDown: () => void;
property preloadImage
preloadImage: (index: number) => void;
预加载图片
property resetImageByIndex
resetImageByIndex: (index: number) => void;
reset Image scale and position
property saveToLocal
saveToLocal: () => void;
保存当前图片到本地相册
property state
state: State;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: Props, prevState: State) => void;
method getContent
getContent: () => JSX.Element;
获得整体内容
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: Props, prevState: State) => { currentShowIndex: number | undefined; prevIndexProp: number | undefined;} | null;
method getMenu
getMenu: () => JSX.Element | null;
method init
init: (nextProps: Props) => void;
props 有变化时执行
method jumpToCurrentImage
jumpToCurrentImage: () => void;
调到当前看图位置
method loadImage
loadImage: (index: number) => void;
加载图片,主要是获取图片长与宽
method render
render: () => JSX.Element;
method resetPosition
resetPosition: () => void;
回到原位
class ImageViewerPropsDefine
class Props {}
property backgroundColor
backgroundColor?: string;
背景颜色
property doubleClickInterval
doubleClickInterval?: number;
property enableImageZoom
enableImageZoom?: boolean;
是否允许缩放图片
property enablePreload
enablePreload?: boolean;
是否预加载图片
property enableSwipeDown
enableSwipeDown?: boolean;
Enable swipe down to close image viewer. When swipe down, will trigger onCancel.
property failImageSource
failImageSource?: IImageInfo;
加载失败的图
property flipThreshold
flipThreshold?: number;
滑动到下一页的X阈值
property footerContainerStyle
footerContainerStyle?: {};
style props for the footer container
property imageUrls
imageUrls: IImageInfo[];
图片数组
property index
index?: number;
初始显示第几张图
property loadingRender
loadingRender?: () => React.ReactElement<any>;
渲染loading元素
property maxOverflow
maxOverflow?: number;
当前页能滑到下一页X位置最大值
property maxScale
maxScale?: number;
property menuContext
menuContext?: any;
Menu Context Values
property menus
menus?: ({ cancel, saveToLocal }: any) => React.ReactElement<any>;
property minScale
minScale?: number;
Min and Max scale for zooming
property onCancel
onCancel?: () => void;
取消看图的回调
property onChange
onChange?: (index?: number) => void;
当图片切换时触发
property onClick
onClick?: (close?: () => any, currentShowIndex?: number) => void;
单击回调
property onDoubleClick
onDoubleClick?: (close?: () => any) => void;
双击回调
property onLongPress
onLongPress?: (image?: IImageInfo) => void;
长按图片的回调
property onMove
onMove?: (position?: IOnMove) => void;
property onSave
onSave?: (url: string) => void;
图片保存到本地方法,如果写了这个方法,就不会调取系统默认方法 针对安卓不支持 saveToCameraRoll 远程图片,可以在安卓调用此回调,调用安卓原生接口
property onSaveToCamera
onSaveToCamera?: (index?: number) => void;
保存到相册的回调
property onShowModal
onShowModal?: (content?: any) => void;
弹出大图的回调
property onSwipeDown
onSwipeDown?: () => void;
function that fires when user swipes down
property pageAnimateTime
pageAnimateTime?: number;
翻页时的动画时间
property renderArrowLeft
renderArrowLeft?: () => React.ReactElement<any>;
自定义左翻页按钮
property renderArrowRight
renderArrowRight?: () => React.ReactElement<any>;
自定义右翻页按钮
property renderFooter
renderFooter?: (currentIndex: number) => React.ReactElement<any>;
自定义尾部
property renderHeader
renderHeader?: (currentIndex?: number) => React.ReactElement<any>;
自定义头部
property renderImage
renderImage?: (props: any) => React.ReactElement<any>;
Render image component
property renderIndicator
renderIndicator?: ( currentIndex?: number, allSize?: number) => React.ReactElement<any>;
自定义计时器
property saveToLocalByLongPress
saveToLocalByLongPress?: boolean;
是否开启长按保存到本地的功能
property show
show?: boolean;
是否显示
property style
style?: ViewStyle;
property swipeDownThreshold
swipeDownThreshold?: number;
threshold for firing swipe down function
property useNativeDriver
useNativeDriver?: boolean;
是否启用原生动画驱动 Whether to use the native code to perform animations.
Package Files (3)
Dependencies (1)
Dev Dependencies (8)
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-image-zoom-viewer
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-image-zoom-viewer)
- HTML<a href="https://www.jsdocs.io/package/react-native-image-zoom-viewer"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2681 ms. - Missing or incorrect documentation? Open an issue for this package.