如何在本机反应(博览会)中获得点击事件(单，双，长)? [英] How can I get the click event (single, double, long) in react native (expo)?

问题描述

我正在制作带有几个点击事件(单、双、长)的按钮以响应本机.我已经使用了 Touchable 组件，并且使用时间延迟获得了这些事件.但这不是一个好的解决方案，并且存在一些问题.就是当我双击时，单个事件同时发生了.在这种情况下，我必须删除单击事件并获取唯一的双击事件.还有其他好的解决办法吗?

I am making the button with several click events (single, double, long) in react native. I have already used the Touchable component and I got these events using a time delay. But this is not a good solution and there are some issues. it is that when I double-click, the single event has happened concurrently. In this case, I have to remove the single click event and get the only double click event. Is there any other good solution?

推荐答案

React Native 中的可触摸不透明度没有 onLongpress 或 for双击支持.

Touchable opacity in react native doesn't have the onLongpress or for double click support.

但您可以使用 TouchableWithoutFeedback，因为它支持 onLongPress 功能.

But You can use TouchableWithoutFeedback, as it supports onLongPress funtionality.

此外，您只需添加自定义代码即可实现双击反应原生可触摸.
您可以做的就是保存计数点击和几秒钟后清除点击计数器，然后触发一个功能onPress 点击两次.

Furthermore you can just add a custom code for implementing doubleclick in react native touchables.
What you can do is to just save the count on click and clear the click counter after some seconds then trigger a funtion on onPress when it is clicked twice.

react native 中双击的示例代码 -

<TouchableWithoutFeedback
    style={{ position: 'absolute', left: 0, padding: 20, backgroundColor:'green' }}
    onPress={() => {
        this.backCount++
        if (this.backCount == 2) {
            clearTimeout(this.backTimer)
            console.warn("Clicked twice")
        } else {
            this.backTimer = setTimeout(() => {
            this.backCount = 0
            }, 3000) #mention here the time for clearing the counter in ms
        }

    }}
>
</TouchableWithoutFeedback>

别忘了在你的构造函数中初始化 this.backCount = 0

Don't forget to initialize this.backCount = 0 in your constructor

这篇关于如何在本机反应(博览会)中获得点击事件(单，双，长)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！