[英]How to pinch zoom image in React Native using PanResponder?
I want to zoom in or zoom out a image when user pinch zooms image using 2 fingers.当用户使用 2 个手指捏缩放图像时,我想放大或缩小图像。 How can I implement it using
PanResponder
?如何使用
PanResponder
实现它?
Or can someone suggest me a good logic on how it can be done?或者有人可以建议我如何完成它的一个很好的逻辑吗?
PS: I don't want to use any external API. PS:我不想使用任何外部 API。
For ios, it can be achieved wrapping your image withinScrollView , as it has inbuilt support for following properties对于 ios,它可以实现将图像包装在ScrollView中,因为它具有对以下属性的内置支持
maximumZoomScale
minimumZoomScale
pinchGestureEnabled
try something like this尝试这样的事情
<ScrollView
maximumZoomScale={SOME_VALUE i.e. 2.5}
minimumZoomScale={MIN_ZOOM_VALUE i.e 1.0}
pinchGestureEnabled={true}
>
<Image source={YOUR_IMAGE} style={YOUR_IMAGE_STYLEs}/>
</Scrollview>
On Android, you may need to use some library or manage it with PanResponder and Animated, PanResponder example code may be a good start point for you.在 Android 上,您可能需要使用一些库或使用 PanResponder 和 Animated 来管理它, PanResponder示例代码可能是您的一个很好的起点。
class ExampleComponent extends Component {
constructor(props) {
super(props);
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
},
onPanResponderMove: (evt, gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
}
render() {
const imageStyles = {transform: [
{
scale: ANIMATION_VALUE_CALCULATED_ON_MOVEMENT //
}
]}
return <Animated.Image {...this._panResponder.panHandlers} style ={imageStyles} source={IMAGE_SOURCE}/>;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.