屏幕上的多个 panresponder 管理不同的区域（同时）

Question

有没有什么办法可以同时使用两个Panresponder而不互相干扰？

我想创建一个应用程序，可以在特定区域同时更改两个样方的 position：蓝色样方只能在蓝色区域移动，灰色样方只能在白色区域移动。 （图片：在这里你看到我的应用程序屏幕）但问题是触摸事件相互干扰。

到目前为止，这是我的代码：

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Animated,
  PanResponder,
  Dimensions,
} from "react-native";

const phoneWidth = Dimensions.get("window").width;

export default function App() {
  const ball = useState(new Animated.ValueXY())[0];
  const panResponder = useState(
    new PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (_, gesture) => {
        ball.setOffset({
          x: ball.x._value,
          y: ball.y._value,
        });
      },
      onPanResponderMove: (_, gesture) => {
        console.log(gesture);
        if (gesture.moveY < 200) {
          ball.x.setValue(gesture.dx);
          ball.y.setValue(gesture.dy);
        }
      },
      onPanResponderRelease: () => {
        ball.flattenOffset();
        if (ball.y._value > 160) {
          ball.y.setValue(160);
        }
        if (ball.y._value < 0) {
          ball.y.setValue(0);
        }
        ball.flattenOffset();
        if (ball.x._value > phoneWidth - 50) {
          ball.x.setValue(phoneWidth - 50);
        }
        if (ball.x._value < 0) {
          ball.x.setValue(0);
        }
      },
    })
  )[0];

  const ball2 = useState(new Animated.ValueXY())[0];
  const panResponder2 = useState(
    new PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        ball2.setOffset({
          x: ball2.x._value,
          y: ball2.y._value,
        });
      },
      onPanResponderMove: (_, gesture) => {
        ball2.x.setValue(gesture.dx);
        ball2.y.setValue(gesture.dy);
      },
      onPanResponderRelease: () => {
        ball2.flattenOffset();
      },
    })
  )[0];

  return (
    <View style={styles.container}>
      <View style={styles.whitefield}>
        <Animated.View
          style={[styles.grayBall, ball.getLayout()]}
          {...panResponder.panHandlers}
        />
      </View>
      <View style={styles.bluefield}>
        <Animated.View
          style={[styles.blueball, ball2.getLayout()]}
          {...panResponder2.panHandlers}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  whitefield: {
    position: "absolute",
    top: 0,
    left: 0,
    height: 200,
    width: 400,
    backgroundColor: "white",
  },
  bluefield: {
    position: "absolute",
    top: Dimensions.get("window").height - 200,
    left: 0,
    height: 200,
    width: 400,
    backgroundColor: "lightskyblue",
  },
  container: {
    flex: 1,
    backgroundColor: "yellow",
    alignItems: "center",
    justifyContent: "center",
  },
  blueball: {
    width: 50,
    height: 50,
    backgroundColor: "blue",
  },
  grayBall: {
    width: 50,
    height: 50,
    backgroundColor: "grey",
  },
});

Answer 1

这不是一个完整的答案，但它作为评论变得太多了：

我无法弄清楚如何使视图的平移处理程序不冒泡；（因为我无法阻止处理程序从第二次触摸（即来自不同的视图）运行。我想我将尝试创建我自己的版本来自被调用的处理程序中的 dx、dy、dx2、dy2。最大的技巧是尝试使用event.nativeEvent.touches ，它是在onPanResponderMove中调用的屏幕上的活动触摸数组

onPanResponderMove: Animated.event(
        [
            null,
            { dx: this.pan2.x, dy: this.pan2.y }
        ],
        {
            useNativeDriver: false,
            listener: (event, gestureState) => {

                let touches = event.nativeEvent.touches;
                //do stuff here
            }
        }
)