typescript - useAnimatedGestureHandler onStart 方法正确的上下文参数类型

Question

长话短说有没有人有任何例子说明 useAnimatedGestureHandler 的正确泛型是什么？

问题:

我正在关注 this Reanimated 2 手势动画教程。有这个例子:

//...
const onGestureEvent = 
useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.offsetX = translateX.value
  },
  //...
})
//...

我使用 typescript，当我在 typescript 中复制示例时，我得到 ctx参数(上下文)类型错误: Property 'offset' does not exist on type '{}'.在 onStart 声明中进行一些窥探之后，我发现 GestureHandlers 的完整类型需要一个通用的 <T, TContext extends Context>。 :

//...
export interface GestureHandlers<T, TContext extends Context> {
  onStart?: Handler<T, TContext>;
  //...
}

解决方法:

我能够通过简单地传递一个实用程序类型 Record(这几乎等同于说“任何”)来解决这个问题，我不喜欢这样。

const onGestureEvent = useAnimatedGestureHandler<
    GestureEvent<PanGestureHandlerEventPayload>,
    Record<string, unknown>
>({
    onStart: (_, ctx) => {
    ctx.offsetX = translateX.value;
    },
    // onActive: () => {},
    // onEnd: () => {},
});

问题:

有没有人举例说明 useAnimatedGestureHandler 的正确泛型是什么？

Answer 1

According to the documentation ，context 是“一个普通的 JS 对象，可以用来存储一些状态”，“你可以读取和写入任何数据”。您只需要自己定义状态的接口(interface)。

源存储库有一个 Example project这证明了这一点。例如，here和 here有两个例子，它们定义了一个作为通用传递的 AnimatedGHContext 类型。

因此在您的情况下，您将定义并传递如下类型:

type AnimatedGHContext = {
  offsetX: number;
};