在 React Native 中，你如何制作像 Instagram 这样的交互式点击并按住模式? [英] In React Native, how do you make an interactive tap-and-hold modal like Instagram?

问题描述

Instagram 有一个非常酷的交互，你可以在图像上点击并按住，也就是长按，然后会出现一个交互式弹出窗口.出现后，您可以将手指拖动到操作按钮之一，然后移开手指应用操作并关闭弹出窗口.

Instagram has a really cool interaction where you can tap-and-hold, aka longPress, on an image and an interactive pop-up appears. Once it appears you can drag your finger to one of the action buttons and removing your finger applies the action and closes the pop-up.

这里正在运行.

如果您需要仔细查看，这里有一个视频链接.

在我的应用中，我让点击并按住弹出窗口工作，但手指拖动继续控制底层视图.

In my app I've got the tap-and-hold popup working, but the finger drag continues to control the underlying View.

如何让手指交互转移到弹出窗口?
如何让按钮响应手指拖拽?

推荐答案

这是您可以使用 PanResponder 实现的目标.使用 Pan Responder，您基本上是在创建自己的可触摸组件.点击此处查看文档.

This is something you can achieve with PanResponder. Using Pan Responder you are basically creating your own touchable components. Click here for the docs.

此外，您还需要 Animated API 来制作动画过渡.

Also, you would need the Animated API for animating the transitions.

这篇关于在 React Native 中，你如何制作像 Instagram 这样的交互式点击并按住模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！