我有11个乞丐排成一个圆圈，就像橄榄球队一样。我希望它被设置成这样，如果我移动队列中的中心乞丐，所有其他乞丐都按比例移动。此外，如果我选择其他10个pandhandler中的任何一个，它只会移动那个特定的pandhandler。这样，用户可以通过使用球将排列的中心来移动整个阵型。否则，他们可以只拖动他们想要玩家开始的地方。
How the lineup looks
我首先在一个数组中创建所有的乞丐并填充它们。然后我给他们一个视图，并将每个视图放置在单独的动画视图中。这个屏幕被导出并放入另一个屏幕中，在那里它被种植在一个足球场的图片的顶部。中心是广场。

export default function Offense({}) {

  const pan0 = useRef(new Animated.ValueXY()).current;
  const pan1 = useRef(new Animated.ValueXY()).current;
  const pan2 = useRef(new Animated.ValueXY()).current;
  const pan3 = useRef(new Animated.ValueXY()).current;
  const pan4 = useRef(new Animated.ValueXY()).current;
  const pan5 = useRef(new Animated.ValueXY()).current;
  const pan6 = useRef(new Animated.ValueXY()).current;
  const pan7 = useRef(new Animated.ValueXY()).current;
  const pan8 = useRef(new Animated.ValueXY()).current;
  const pan9 = useRef(new Animated.ValueXY()).current;
  const pan10 = useRef(new Animated.ValueXY()).current;

function panResponder(num) {
        return useRef(
            PanResponder.create({
                onMoveShouldSetPanResponder: () => true,
                onPanResponderMove: Animated.event([null, {dx: num.x, dy: num.y}], {useNativeDriver: false}),
                onPanResponderRelease: () => {
                    num.extractOffset();
                },
            }),
        ).current
    }

 const pArray = [cpanResponder(pan0), panResponder(pan1), panResponder(pan2),
    panResponder(pan3), panResponder(pan4), panResponder(pan5), panResponder(pan6),
  panResponder(pan7), panResponder(pan8), panResponder(pan9),
  panResponder(pan10)]

return(
    <SafeAreaView style = {styles.container}>
        <View style = {styles.aV}>
           <View style = {styles.center}>
             <Animated.View
             style={{
             transform: [{translateX: pan0.x}, {translateY: pan0.y}],
             }}
             {...pArray[0].panHandlers}>
               <View style = {styles.cBox}>
                 <View style={styles.box}/>
               </View>
            </Animated.View>
          </View>

          <View style = {styles.lGuard}>
            <Animated.View
            style={{
            transform: [{translateX: pan1.x}, {translateY: pan1.y}],
            }}
            {...pArray[1].panHandlers}>
               <View style={styles.box} />
            </Animated.View> 
         </View>
    ....

     </View>
   </SafeAreaView>
  )
}

这可以正确地单独移动所有乞丐。然而，中心并没有移动其余的。所以，我试着把它们都放在中间乞丐的动画视图里。

return(
    <SafeAreaView style = {styles.container}>
        <View style = {styles.aV}>
           <View style = {styles.center}>
              <Animated.View
                 style={{
                   transform: [{translateX: pan0.x}, {translateY: pan0.y}],
                  }}
                  {...pArray[0].panHandlers}>
                    <View style = {styles.cBox}>
                        <View style={styles.box}/>
                    </View>

                   <View style = {styles.lGuard}>
                       <Animated.View
                       style={{
                       transform: [{translateX: pan1.x}, {translateY: pan1.y}],
                       }}
                       {...pArray[1].panHandlers}>
                           <View style={styles.box} />
                      </Animated.View> 
                   </View>
    ....
              </Animated.View>
          </View>
       </View>
    </SafeAreaView>
  )

这一方法可以移动所有乞丐，但其他乞丐不再单独移动。我还尝试在一个单独的函数中创建中心乞丐，并为所有其他乞丐调用Animated.event。然而，这只是打破了中心。

function cpanResponder(num) {
      return useRef(
          PanResponder.create({
              onMoveShouldSetPanResponder: () => true,
              onPanResponderMove: Animated.event([null, {dx: num.x, dy: num.y}, {dx: pan1.x, dy:
                 pan1.y}, ...], {useNativeDriver: false}),
              onPanResponderRelease: () => {
                num.extractOffset();
              },
          }),
      ).current
  }

所以，我想知道有没有人知道该怎么做，或者可以给我指明正确的方向？非常感谢
这是世博小吃的版本，所有单独移动。https://snack.expo.dev/@jerods/football_individual_move
这是世博会小吃的版本，他们都移动到一起。https://snack.expo.dev/@jerods/football-_all_move