Zoom while sliding
Intelligent zoom
npm i react-native-image-pan-zoom --save
- Install react-native first
$ npm i react-native -g
- Initialization of a react-native project
$ react-native init myproject
- Then, edit myproject/index.ios.js, like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Modal
} from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
class ImageZoom extends React.Component {
render: function() {
return (
<ImageZoom cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
imageWidth={200}
imageHeight={200}>
<Image style={{width:200, height:200}}
source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}}/>
</ImageZoom>
)
}
}
AppRegistry.registerComponent('myproject', () => ImageZoom);
Props | Type | Description | DefaultValue |
---|---|---|---|
cropWidth(required) | number | operating area width | 100 |
cropHeight(required) | number | operating area height | 100 |
imageWidth(required) | number | picture width | 100 |
imageHeight(required) | number | picture height | 100 |
onClick | ()=>void | onClick | ()=>{} |
panToMove | boolean | allow to move picture with one finger | true |
pinchToZoom | boolean | allow scale with two fingers | true |
leaveStayTime | number | how many milliseconds after the finger presses to trigger onClick |
100 |
leaveDistance | number | how many finger movement can also trigger onClick |
10 |
horizontalOuterRangeOffset | (offsetX?: number)=>void | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | ()=>{} |
onDragLeft | ()=>void | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>{} |
responderRelease | (vx: number)=>void | let go but do not cancel | ()=>{} |
maxOverflow | number | maximum sliding threshold | 100 |
longPressTime | number | long press threshold | 800 |
onLongPress | ()=>void | on longPress | ()=> {} |
doubleClickInterval | number | time allocated for second click to be considered as doublClick event | 175 |