如何在react native(expo)中获取点击事件(单、双、长)

Question

我正在react native中制作带有多个点击事件(单次、双次、长次(的按钮。我已经使用了Touchable组件，并且我使用了时间延迟来获得这些事件。但这不是一个好的解决方案，也存在一些问题。当我双击时，单个事件同时发生。在这种情况下，我必须删除单击事件并获得唯一的双击事件。还有其他好的解决方案吗？

Answer 1

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

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

此外，您只需添加一个自定义代码即可实现双击react原生可触摸设备
你能做的就是保存计数点击并几秒钟后清除点击计数器，然后在on单击两次时按。

在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

Answer 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.https://www.npmjs.com/package/react-native-double-tap和2.https://www.npmjs.com/package/react-native-double-click