React Native: Propager l'événement Pan Responder de la vue à la vue de défilement interne
J'ai un ScrollView dans une vue animée qui a un panoramique.
<Animated.View {...this.panResponder.panHandlers}>
<ScrollView>
...
</ScrollView>
<Animated.View>
Voici un exemple de vue de mon écran:
Un utilisateur doit pouvoir glisser vers le haut et la zone déplaçable doit s'accroupir vers le haut, comme illustré ci-dessous:
Maintenant, mon problème est le Scrollview. Je veux qu'un utilisateur puisse faire défiler le contenu à l'intérieur.
Une fois que l'utilisateur a fini de visualiser le contenu à l'intérieur et fait défiler vers le haut (en effectuant un mouvement de balayage vers le bas) et essaie de glisser plus loin, la zone de déplacement doit se déplacer vers le bas jusqu'à sa position d'origine.
J'ai essayé différentes méthodes, principalement en désactivant et en activant le défilement du ScrollView, pour éviter son interférence avec le panoramique.
Ma solution actuelle n'est pas idéale.
Mon principal problème est ces 2 méthodes:
onStartShouldSetPanResponder
onStartShouldSetPanResponderCapture
Je ne sais pas si mon hypothèse est correcte, mais ces méthodes décident si la vue doit capturer l'événement tactile. J'autorise le panoramique ou je laisse ScrollView capturer l'événement à la place.
Mon problème est que je dois en quelque sorte savoir ce que l'utilisateur a l'intention de faire avant que les autres gestionnaires de pan ne se déclenchent. Mais je ne peux pas le savoir jusqu'à ce que l'utilisateur se soit déplacé vers le bas ou vers le haut. Pour connaître la direction, j'ai besoin que l'événement soit transmis au gestionnaire onPanResponderMove .
Donc, en substance, je dois décider si je dois permettre à ma vue d'être déplacée avant même de savoir dans quelle direction l'utilisateur glisse. Actuellement, ce n'est pas possible.
J'espère que je manque quelque chose de simple ici.
[~ # ~] modifier [~ # ~] : Trouvé une question similaire (sans réponse): Faites glisser un ScrollView puis continuez faites défiler React Native
Je pense que vous pouvez créer une mise en page pour répondre à vos besoins. Ou vous pouvez utiliser des feuilles d'actions dans iOS. Considérez ci-dessous les bibliothèques. Cela peut vous être utile
https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior
ou