問題タブ [react-native-gesture-handler]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-native - React Native Gesture Handler と Reanimated を使用してスワイプ方向を検出する
React Native PanResponder を使用して既にスワイパーを開発しました (誰かがコメントする前に) - ここでは他のスワイパー ライブラリを使用できません。私たちが開発したスワイパーでは、ユーザーがスワイプを終了する (パンを解放する) ときに、スプリング アニメーションを開始するときに遅延が発生するという問題に直面しています。
これを修正するために、React Native Animated APIから、ユーザーが直面している遅延の問題を解決できるReanimated Libaryに移行しようとしています。
しかし、React Native Gesture Handler (PanGestureHandler) と Reanimated Library を使用して開発している間、ジェスチャー ハンドラーでスワイプ方向を検出できません。
PanResponder でスワイプ方向を検出するために使用したコードの一部を追加しています
ご覧のとおり、PanResponder では、パンの移動中に方向を検出するのは非常に簡単でした。
ここでジェスチャーハンドラーの問題が発生します。
ジェスチャー状態がアクティブな間、スワイプを検出できません
Gesture Handler の問題を既に検索したところ、これが見つかりました。
問題で提案された2つの回避策がありました
- 最初の 1 つは、 2 つのハンドラーを持ち、両方のハンドラーの onHandlerStateChange でスワイプ方向を検出するSonayeによるものです。
- 2 つ目は、State が ACTIVE のときに実際にスワイプを検出するSatyaによるものですが、彼はtranslationXプロパティを使用します。translationX プロパティは負になることもあり、swiper と同様にどちらの方向にも移動できます。
どちらの回避策も問題を解決しません。
PanGestureHandler と Reanimated を使用して方向を見つける他の方法はありますか。Reanimated with dx value で PanResponder を使用しようとしましたが、エラー メッセージが表示されました。つまり、dxは PanResponder のgestureState パラメータからのものであるため、nativeEvent プロパティはサポートのみです。
注: FlingGestureHandler と Swipeables はまだ onHandlerStateChange で方向を見つける必要があり、Swipeables は Reanimated を使用しないため、FlingGestureHandler と Swipeables は使用できません。