1.0.0 • Published 6 years ago
@mopa/react-native-image-zoom v1.0.0
react-native-image-zoom
React Native图片缩放组件。
Installation
npm install @mopa/react-native-image-zoom --saveUsage
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
1.0.0
6 years ago