panResponder 在屏幕上有两次触摸时继续捕捉

问题描述

我希望在屏幕上有两次触摸时 panResponder 继续前进并且不要停止但大约半秒后 panResponder 停止并开始滚动 这是我的代码

import {View} from 'native-base';
import React,{Children,useMemo,useState} from 'react';
import {Animated,NativetouchEvent,PanResponder} from 'react-native';
import {getdistance} from '../utils/functions';

interface Props {
  opacity: Animated.Value;
}

const PinchZoom: React.FC<Props> = (props) => {
  let initialXs: Array<number> = [];
  let initialYs: Array<number> = [];
  let currentXs: Array<number> = [];
  let currentYs: Array<number> = [];

  const resetAnimation = () => {
    Animated.spring(props.opacity,{
      tovalue: props.opacity,useNativeDriver: false,}).start();
  };

  const panResponder = useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (event) => {
          let touches = event.nativeEvent.touches;

          if (touches.length == 2) {
            return true;
          } else {
            return false;
          }
        },onPanResponderStart: (initial_event,initial_gesture) => {
          let touches = initial_event.nativeEvent.touches;
          if (touches.length == 2) {
            initialXs = [];
            initialYs = [];
            initialXs.push(touches[0].locationX);
            initialXs.push(touches[1].locationX);
            initialYs.push(touches[0].locationY);
            initialYs.push(touches[1].locationY);
          }
        },onMoveShouldSetPanResponder: () => true,onPanResponderMove: (event,gesture) => {
          let touches = event.nativeEvent.touches;
          if (touches.length == 2) {
            currentXs = [];
            currentYs = [];
            currentXs.push(touches[0].locationX);
            currentXs.push(touches[1].locationX);
            currentYs.push(touches[0].locationY);
            currentYs.push(touches[1].locationY);
          }
          console.log('Xs',initialXs,currentXs);
          console.log('Ys',initialYs,currentYs);
        },onPanResponderRelease: (event,gesture) => {
          let touches = event.nativeEvent.touches;
          console.log('Xs',currentYs);
          if (touches.length == 2) {
            console.log('Xs',currentXs);
            console.log('Ys',currentYs);
          }
        },}),[],);
  return (
    <Animated.View {...panResponder.panHandlers}>
      {props.children}
    </Animated.View>
  );
};

export default PinchZoom;

我希望当屏幕上有两次触摸时 panResponder 启动，直到有两次触摸它继续，当有一次触摸时它停止

解决方法

我用下面的代码临时解决了这个问题

import {Text} from 'native-base';
import React,{useState} from 'react';
import {Animated,Dimensions,PanResponder} from 'react-native';
import {getDistance} from '../utils/functions';

const WINDOW_WIDTH = Dimensions.get('screen').width;
const WINDOW_HEIGHT = Dimensions.get('screen').height;

interface Props {
  distance: Animated.Value;
}

const PinchZoom: React.FC<Props> = (props) => {
  let initialXs: Array<number> = [];
  let initialYs: Array<number> = [];
  let currentXs: Array<number> = [];
  let currentYs: Array<number> = [];
  let distance = props.distance;
  let zIndex: number = 0;
  let initial_distance: number = 0;
  let current_distance: number = 0;

  const panResponder = useState(() =>
    PanResponder.create({
      onStartShouldSetPanResponder: (event,gesture) => {
        let touches = event.nativeEvent.touches;
        if (gesture.numberActiveTouches == 2) {
          zIndex = 2;
          return true;
        } else {
          zIndex = 0;
          return false;
        }
      },onPanResponderStart: (initial_event,initial_gesture) => {
        let touches = initial_event.nativeEvent.touches;

        initialXs = [];
        initialYs = [];

        initialXs.push(touches[0].locationX);
        initialXs.push(touches[1].locationX);
        initialYs.push(touches[0].locationY);
        initialYs.push(touches[1].locationY);
      },onPanResponderGrant: () => {
        initialXs = initialXs;
        initialYs = initialYs;
        currentXs = currentXs;
        currentYs = currentYs;
      },onPanResponderMove: (event,gesture) => {
        let touches = event.nativeEvent.touches;

        if (touches.length == 2) {
          currentXs = [];
          currentYs = [];

          currentXs.push(touches[0].locationX);
          currentXs.push(touches[1].locationX);
          currentYs.push(touches[0].locationY);
          currentYs.push(touches[1].locationY);

          initial_distance = getDistance(
            initialXs[0],initialYs[0],initialXs[1],initialYs[1],);
          current_distance = getDistance(
            currentXs[0],currentYs[0],currentXs[1],currentYs[1],);
        }

        props.distance.setValue(initial_distance - current_distance);

      },onPanResponderRelease: () => {
        zIndex = 0;
      },}),)[0];
  return (
    <Animated.View
      style={{
        width: WINDOW_WIDTH,height: WINDOW_HEIGHT,zIndex: zIndex,}}
      {...panResponder.panHandlers}>
      {props.children}
    </Animated.View>
  );
};

export default PinchZoom;

但是如果有人有更好的答案，我很感激与我分享