callstack / callstack/react-native-pager-view
How to make ViewPager be more aggressive in responding to horizontal gesture when nested inside a vertical ScrollView?
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
Hi everyone,
Users are reporting that it is difficult to use the ViewPager to successfully scroll left and right between images, since the ScrollView that the ViewPager is nested in seems to grab the event more than it should.
[Example](https://photos.google.com/share/AF1QipM8vQJTpFJkYNWk4H2DttKGoPp_h1GQOWglxDdaV-PqukyPk1S1nOE3NjHw_af9HQ/photo/AF1QipOxZRQTf5imKOZqPpwqqdnPqSZkyO74F8zx02bN?key=NFJVY3ZlWFdWeXRJODFhQTlISGJrU2RIR3RZN3RR)
Indeed, I compared my app to Google Maps which has a very similar UI: A horizontally scrollable set of images inside a vertically scrolling parent view. In Google Maps, I can move my finger at 45 degrees to either side, and the horizontal images view takes the event. In my app, moving my finger 45 degrees is picked up by the ScrollView and the entire page begins scrolling up and down.
Here, the purple arrows are what is handled by both apps successfully. The blue arrows are what is handled successfully by Google Maps but not by ScrollView/ViewPager. In Google Maps, the result is a horizontal scroll, in my app the result is a vertical scroll - and angry users.
I have looked into the props and found: `ViewPager.onStartShouldSetResponder` and `ViewPager.onMoveShouldSetResponderCapture`. I tried providing a function that always returns true for both, but got no effect in my app. I also tried the same props but returning false for the ScrollView. Still nothing. I also tried `ScrollView.disableScrollViewPanResponder`, although I'm not really sure what this does.
Somewhat at a loss here, can anyone help?
コントリビューションガイド
調査の方向性
報告されている ViewPager の ScrollView 内へのネストと、言及されている responder props: ViewPager.onStartShouldSetResponder、ViewPager.onMoveShouldSetResponderCapture、ScrollView.disableScrollViewPanResponder から始めてください。リンク先の例にある斜め方向のジェスチャー動作を再現し、修正を定義する前に、水平方向と垂直方向のイベント処理の期待される動作を明確にしてください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native
- 領域
- mobile-dev
- issue の種類
- バグ
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 20/100