考虑到子组件不是一个选项，使用 react-native-reanimated 为一组对象设置动画的正确方法是什么？

What is the proper way to animate an array of objects with react-native-reanimated, considering a sub-component is not an option?

我正在尝试使用 react-native-reanimated v2 为 Animated.View 数组设置动画。

对于我来说，有两个障碍：

  1. 对象最终会相互动画。因此，我无法为每个可拖动对象生成新的子组件。 （如果我尝试这样做，子组件之间的信号可能会很糟糕。）
  2. Rules of Hooks 禁止在循环或其他函数中使用钩子。 （但据我所知，这就是我所需要的。）

我做了一个点心来说明我在这里尝试实现的目标（请注意，其中一个盒子可以在这里移动另一个盒子）： https://snack.expo.dev/@mehmetkaplan/react-native-reanimated-array-animation

不过我猜是因为上面第2条，snack的表现不太一致，有时候拖动没有反应。 （点心的single box version响应顺畅多了。）

回到主要问题。考虑到子组件不是一个选项，使用 react-native-reanimated 为对象数组设置动画的正确方法是什么？

如有任何建议，我们将不胜感激。

在循环中使用钩子

绝对不是什么值得骄傲的事情，但只要 use... 调用的顺序不受影响并且所有逻辑都发生在调用之后就可以了。这意味着在组件的生命周期中，循环中的迭代次数不应改变。

基本上调用所有钩子的顺序应该始终相同。

行为不一致

确保您的 PanGestureHandler 包装 Animated.View 组件，否则它将无法在移动设备上运行。

除了奇怪的拖动手柄（仅适用于 Text）并在移动设备上损坏。我无法发现行为中的任何不一致之处。将整个 Animated.View 嵌套在 PanGestureHandler 中可以解决这两个问题，

<PanGestureHandler onGestureEvent={gestureHandlers[i]}>
  <Animated.View style={[styles.box, animatedStyles[i]]} key={`View-${i}`}>
      <Text style={{color: "#FFFF00", fontWeight:'bold'}}>{`I am the box #${i}\nDrag Me${i === 1 ? "(I move also Box 0)" : ""}`}</Text>
  </Animated.View>
</PanGestureHandler>

这是一个工作示例，

https://snack.expo.dev/A9IF7ngoC