2

ユーザーが特定のスワイプの長さでコンテナーをドラッグすると、触覚フィードバックを実行しようとしています。したがって、次のコードでは、ユーザーがイベント リスナーを使用してコンテナーをドラッグしているときに、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関数がトリガーされません。ここで何が間違っていますか? このリスナーの値を正しく取得するにはどうすればよいですか?

4

0 に答える 0