React native 如何在react native（expo）中获取单击事件（单、双、长）？

我正在用react native中的几个单击事件（单、双、长）制作按钮。 我已经使用了可触摸组件，并且我使用时间延迟获得了这些事件。 但这不是一个好的解决方案，而且存在一些问题。当我双击时，单个事件同时发生。 在这种情况下，我必须删除single click事件并获得唯一的双击事件。

---

还有其他好的解决方案吗？

您必须使用

onPress

和

onlongppress

进行单击和长时间单击事件。以下是您可以检查的示例：

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>

可长按触摸的

reactNative/expo中没有双击的默认行为，但是您可以查看以下模块 1.及

---

2.

您必须使用

onPress

和

onLongPress

进行单击和长时间单击事件。以下是您可以检查的示例：

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>

可长按触摸的

reactNative/expo中没有双击的默认行为，但是您可以查看以下模块 1.及 2.

react native中的可触摸不透明度没有onLongpress或for 双击支持。

但是您可以使用，因为它支持功能性。

此外，您还可以添加一个自定义代码来实现 双击react native touchables。
您可以做的只是保存计数 点击并 几秒钟后清除点击计数器，然后触发功能 当它被点击两次时

在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==2）{
clearTimeout（此为.backTimer）
console.warn（“单击两次”）
}否则{
this.backTimer=setTimeout（（）=>{
此值为0.backCount=0
}，3000）#在这里以毫秒为单位说明清理柜台的时间
}
}}
>

不要忘记在构造函数中初始化此项。backCount=0

react native中的可触摸不透明度没有onLongpress或for 双击支持。

但是您可以使用，因为它支持功能性。

此外，您还可以添加一个自定义代码来实现 双击react native touchables。
您可以做的只是保存计数 点击并 几秒钟后清除点击计数器，然后触发功能 当它被点击两次时

在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==2）{
clearTimeout（此为.backTimer）
console.warn（“单击两次”）
}否则{
this.backTimer=setTimeout（（）=>{
此值为0.backCount=0
}，3000）#在这里以毫秒为单位说明清理柜台的时间
}
}}
>

---

不要忘记在构造函数中初始化此项。backCount=0

感谢您的回复。但我必须使用单个组件来获取这些事件。如果我使用上述库，我无法在单个组件上获取三个事件。您可以检查（1）模块。这里有你所有的三个事件检查{console.log（“单点击”）；}}}doubleTap={（）=>{console.log（“双点击”）；}}}delay={200}>晃动你的手机打开开发者菜单。好的，我会查一下。谢谢你的回复。但我必须使用单个组件来获取这些事件。如果我使用上述库，我无法在单个组件上获取三个事件。您可以检查（1）模块。这里有你所有的三个事件检查{console.log（“单点击”）；}}}doubleTap={（）=>{console.log（“双点击”）；}}}delay={200}>晃动你的手机打开开发者菜单。好的，我会检查一下。听起来不错。你能给我举个例子吗？哪一个例子@nikolai sergI的意思是获取双击事件示例。嘿@nikolai serg，我已经编辑了代码，请检查它并接受它，如果它有效，谢谢：）很抱歉我的反应太晚了。很好。然后，我想通过使用一个组件来获取单击事件（单、双、长），这在您的解决方案中是可能的。但您的代码不包含此部分。（单键、长键）单击。所以我更新了你的答案来匹配我的问题。听起来不错。你能给我举个例子吗？哪一个例子@nikolai sergI的意思是获取双击事件示例。嘿@nikolai serg，我已经编辑了代码，请检查它并接受它，如果它有效，谢谢：）很抱歉我的反应太晚了。很好。然后，我想通过使用一个组件来获取单击事件（单、双、长），这在您的解决方案中是可能的。但您的代码不包含此部分。（单键、长键）单击。所以我更新了你的答案来匹配我的问题。