javascript - PanGestureHandler 预期 `onGestureHandlerEvent` 监听器是一个函数

Question

使用 react-native-gesture-handler 中的 PanGestureHandler 和 react-native-reanimated 以及 useAnimatedGestureHandler 抛出这个错误。

Expected onGestureHandlerEvent listener to be a function, instead got a value of object type

这些是正在渲染的组件，

<View style={[styles.center]}>
  <Text style={{color: "#555", fontSize:16, marginTop: 120, marginBottom: 70, width: 250, margin: 'auto'}}>Works on the web but throws an error on iOS.</Text>

  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
    </PanGestureHandler>
  </Animated.View>
</View>;

点心，https://snack.expo.dev/4Mp-PfXPU

Answer 1

This comment在 GitHub 上指出了正确的方向。

虽然没有在文档中指定，但可以从示例中推断... PanGestureHandler <PanGestureHandler ...> 内需要一个动画组件子组件. (如<Animated.View ...>)

所以 <Animated.View ...>...</Animated.View> ，或其他一些动画组件，需要在 <PanGestureHandler onGestureEvent={gestureHandler}> 内.

<PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
  </Animated.View>
</PanGestureHandler>

这是一份工作点心，

https://snack.expo.dev/ZRr6t24Hv