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

【问题标题】：React-Native pinch-to-zoom using PanResponder使用 PanResponder 进行 React-Native 捏合缩放
【发布时间】：2018-02-07 18:55:16
【问题描述】：

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

【问题讨论】：

标签： javascript android ios react-native mobile

【解决方案1】：

要使用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。

【讨论】：

【解决方案2】：

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

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

【讨论】：