web-dev-qa-db-ja.com

React Native：ビューから内側のスクロールビューにPan Responderイベントを伝播します

パンするアニメーションビュー内にScrollViewがあります。

<Animated.View {...this.panResponder.panHandlers}>
    <ScrollView>
    ...
    </ScrollView>
<Animated.View>

これは私の画面のサンプルビューです。

enter image description here

以下に示すように、ユーザーは上方向にスワイプでき、ドラッグ可能領域は上方向にスナップできるはずです。

enter image description here

今、私の問題はScrollviewです。ユーザーがコンテンツをスクロールできるようにしたい。

ユーザーが内部のコンテンツの表示を終了し、上方向に（下方向にスワイプモーションを実行して）スクロールし、さらにスワイプしようとすると、ドラッグ可能な領域が下に移動して元の位置に戻るはずです。

私はさまざまな方法を試しましたが、主にScrollViewのスクロールの無効化と有効化に焦点を当て、パンニングとの干渉を防ぎました。

私の現在の解決策は理想的ではありません。

私の主な問題は次の2つの方法です。

onStartShouldSetPanResponder 
onStartShouldSetPanResponderCapture

私の仮定が正しいかどうかはわかりませんが、これらのメソッドはビューがタッチイベントをキャプチャするかどうかを決定します。パンを許可するか、代わりにScrollViewにイベントをキャプチャさせます。

私の問題は、他のパンハンドラーが起動する前に、ユーザーが何をしようとしているのかを何らかの方法で知る必要があることです。しかし、ユーザーが下または上に移動するまで、それを知ることができません。 onPanResponderMoveハンドラーに渡すイベントが必要な方向を知るために。

つまり、ユーザーがスワイプしている方向を知る前に、ビューをドラッグできるようにするかどうかを決定する必要があります。現在、それは不可能です。

うまくいけば、ここに簡単なものがありません。

[〜＃〜] edit [〜＃〜]：同様の質問が見つかりました（回答なし）： ScrollViewをドラッグして続行しますスクロールインReact Native

react-nativereact-animated
11
Gilbert Nwaiwu

あなたの要求を満たすボトムシートレイアウトを作成できると思います。または、iOSでアクションシートを使用できます。以下のライブラリを検討してください。それはあなたのために役立つかもしれません

https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

または

https://github.com/maxs15/react-native-modalbox

0
Vinayak B