callstack / callstack/react-native-pager-view

How to make ViewPager be more aggressive in responding to horizontal gesture when nested inside a vertical ScrollView?

オープン
#450 コメント 13 件 リアクション 1 件 担当者 0 名 GitHub で見る
question
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。