問題タブ [react-native-reanimated]

質問する

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.

260 問題

0 投票する

2 に答える

4548 参照

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 は使用できません。

react-native react-native-reanimated react-native-gesture-handler

2019-11-19T17:09:08.987

0 投票する

1 に答える

1159 参照

react-native - 新しい子が追加されたときにビューのサイズが大きくなったときにアニメーション化する方法はありますか?

LayoutAnimation現在、子が追加されたときにビューをアニメーション化するために使用しています。ただし、LayoutAnimation はすべてをグローバルにアニメーション化するため、ユースケースに合わせて組み込みの Animated ライブラリを簡単に使用できないため、react-native-reanimated が役立つかどうか疑問に思っています。

これが私の現在のソリューションのスナックです: https://snack.expo.io/@insats/height-adapation

その結果は次のようになります。

を使用せずに同じことを達成する方法はありLayoutAnimationますか? react-native-reanimated のすべての例を調べ、ドキュメントを読みましたが、これが可能かどうか、またはどのように開始すればよいかはまだわかりません。item-wrapper を表示可能領域の外に移動し、アイテムが追加されたときに (transform translateY を使用して) 上に「スクロール」することを考えAnimatedましたが、それには高さを固定する必要がありますが、これは持っていません。