使用PanResponder进行React-Native捏合缩放

Question

我制作了一个组件，可以Image放大View组件。我想在图像上进行捏合缩放。我正在使用PanResponder有没有办法获得多点触控事件？

Answer 1

我建议您查看react-native-transformable-image库或较低级react-native-view-transformer组件，前者在内部使用。

这些可能对您有用，或者如果您希望实现更自定义的内容，阅读其源代码可能有助于找到解决方案。

Answer 2

要使用PanResponder进行操作，您只需检查event属性中是否有一个或两个触摸对象：

this.panResponder = PanResponder.create({
    onMoveShouldSetResponderCapture: () => true,
    onMoveShouldSetPanResponderCapture: () => true,

    onPanResponderGrant: (event, gestureState) => {

    },

    onPanResponderMove: (event, gestureState) => {
        const touches = event.nativeEvent.touches;

        if (touches.length >= 2) {
            // We have a pinch-to-zoom movement
            // Track locationX/locationY to know by how much the user moved their fingers
        } else {
            // We have a regular scroll movement
        }
    },

    onPanResponderRelease: (event, gestureState) => {

    },
});

请注意，在onPanResponderGrant中可能有一个触摸对象，但是如果用户随后按下了第二根手指，则在onPanResponderMove上可能有两个触摸对象。

因此请考虑到这一点-即始终签入onPanResponderMove。