3

TL; DR 有没有人有任何示例什么是正确的泛型用于 useAnimatedGestureHandler？

问题：

我正在关注关于 Reanimated 2 手势动画的本教程。有这个例子：

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

我使用打字稿，当我在打字稿中复制示例时，我得到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 吗？

4

1 回答 1

6

根据文档，context是“可以用来存储某些状态的普通 JS 对象”，“您可以读取和写入任何数据”。您只需要自己定义状态的接口。

源存储库有一个示例项目来演示这一点。例如，这里和这里是两个示例，它们定义了AnimatedGHContext作为泛型传递的类型。

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

type AnimatedGHContext = {
  offsetX: number;
};
于 2021-05-06T07:35:01.727 回答