ユーザーが特定のスワイプの長さでコンテナーをドラッグすると、触覚フィードバックを実行しようとしています。したがって、次のコードでは、ユーザーがイベント リスナーを使用してコンテナーをドラッグしているときに、translateY の値を取得しようとしています。
constructor(props: TweetsProps) {
super(props);
const { tweets } = props;
this.state = {
...
};
...
this.onPanGestureEvent = Animated.event(
[{ nativeEvent: { translationX: this.translationX, translationY: this.translationY } }],
{
useNativeDriver: true,
listener: this.onPan.bind(this),
},
);
this.onGestureEvent = event(
[
{
nativeEvent: {
translationX: this.translationX,
translationY: this.translationY,
velocityX: this.velocityX,
state: this.gestureState,
},
},
],
{ useNativeDriver: true },
);
}
...
onPan({ nativeEvent: { translationY } }) {
console.log("fired")
if (translationY > 130 || translationY < -130) {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
}
}
render() {
const { onGestureEvent, translateY, onPanGestureEvent, onResponse } = this;
...
return (
<SafeAreaView style={styles.container}>
<View style={styles.cards}>
<PanGestureHandler
onHandlerStateChange={onGestureEvent}
onGestureEvent={onPanGestureEvent}
{...{ onGestureEvent }}
>
<Animated.View {...{ style }} onResponderMove={onResponse}>
<Card tweet={lastTweet} swipeDown={this.state.swipeDown} {...{
likeOpacity,
nopeOpacity
}} />
</Animated.View>
</PanGestureHandler>
</View>
...
);
}
私のコードではonPan関数がトリガーされません。ここで何が間違っていますか? このリスナーの値を正しく取得するにはどうすればよいですか?