@mopa/react-native-image-zoom

react-native-image-zoom

React Native图片缩放组件。

Installation

npm install @mopa/react-native-image-zoom --save

Usage

import React from 'react';
import { Image, Dimensions } from 'react-native';
import ImageZoom from '@mopa/react-native-image-zoom';

export default class App extends React.Component {
	render() {
    return (
      <ImageZoom
    		zoomWidth={Dimensions.get('window').width}
    		zoomHeight={Dimensions.get('window').height}
    		imageWidth={300} 
    		imageHeight={300}
			>
    		<Image style={{width:300, height:300}} source={{ uri: 'imageurl' }} />
			</ImageZoom>
    );
  }
}

Document

Props	Type	Description	Default Value
zoomWidth	number	缩放区域宽	200
zoomHeight	number	缩放区域高	200
imageWidth	number	图片宽	200
imageHeight	number	图片高	200
onClick	func	单击回调	() => {}
enableDoubleClickZoom	bool	是否允许双击	true
doubleClickTimeInterval	number	双击时间间隔	175
onDoubleClick	func	双击回调	() => {}
enablePanToMove	bool	是否允许移动	true
enablePinchToZoom	bool	是否允许缩放	true
minScale	number	最小缩放比例	0.6
maxScale	number	最大缩放比例	10

###License

IST