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

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 onejsDocs.io badgeto 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>