react-native - 異なる領域を管理する画面上の複数のパンレスポンダー (同時に)

Question

2 つのパンレスポンダーを同時に使用する方法はありますか?

特定の領域で 2 つの四角形の位置を同時に変更できるアプリを作成したいと考えています。青い四角形は青い領域でのみ移動でき、灰色の四角形は白い領域でのみ移動できる必要があります。（画像：ここに私の app-screenが表示されます）しかし、問題はタッチイベントが互いに干渉することです。

これは今までの私のコードです:

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",
  },
});