isabella232 / react-native-image-viewer

🚀 tiny & fast lib for react native image viewer pan and zoom

Show Cases

Swiper image

Zoom while sliding

Getting Started

Installation

npm i react-native-image-zoom-viewer --save

Basic Usage

• Install create-react-native-app first

$ npm install -g create-react-native-app

• Initialization of a react-native project

$ create-react-native-app AwesomeProject

• Then, edit AwesomeProject/App.js, like this:

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    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'
}]

export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        )
    }
}

Props

parameter	type	required	description	default
imageUrls	array	yes	图片数组
enableImageZoom	boolean	no	是否开启图片手势功能	true
onShowModal	function (content?: JSX.Element) => void	no	弹出大图的回调	() => {}
onCancel	funcion () => void	no	取消看图的回调	() => {}
flipThreshold	number	no	滑动到下一页的阈值	80
maxOverflow	number	no	当前页能滑到下一页X位置最大值	300
index	number	no	初始显示第几张图	0
failImageSource	string, object {uri: string}	no	加载失败的图	''
loadingRender	function () => React.ReactElement<any>	no	渲染loading元素	() => null
onSaveToCamera	function (index?: number => void	no	保存到相册的回调	() => {}
onChange	function (index?: number => void	no	当图片切换时触发	() => {}
saveToLocalByLongPress	boolean	no	是否开启长按保存到本地的功能	true
onClick	function (onCancel?: function) => void	no	单击回调	(onCancel) => {onCancel()}
onDoubleClick	function (onCancel?: function) => void	no	双击回调	(onCancel) => {onCancel()}
onSave	function (url: string) => void	no	图片保存到本地方法，如果写了这个方法就不会调取系统默认方法针对安卓不支持saveToCameraRoll远程图片，可以在安卓调用此回调调用安卓原生接口
renderHeader	function () => React.ReactElement<any>	no	自定义头部	() => null
renderFooter	function () => React.ReactElement<any>	no	自定义尾部	() => null
renderIndicator	function (currentIndex?: number, allSize?) => React.ReactElement<any>: number	no	自定义计时器	(currentIndex, allSize) => currentIndex + "/" + allSize
renderArrowLeft	function () => React.ReactElement<any>	no	自定义计时器	() => null
renderArrowRight	function () => React.ReactElement<any>	no	自定义左翻页按钮	() => null

Development pattern

Step 1, run TS listener

After clone this repo, then:

npm install
npm start

Step 2, run demo

cd demo
npm install
npm start

Then, scan the QR, use your expo app.

Dependence

Depend on react-native-image-pan-zoom: https://github.com/ascoders/react-native-image-zoom