如何在 React Native (expo) 中获取点击事件（单、双、长）？

Question

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

Answer 1

单击和长按事件必须使用 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

Answer 2

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

但是您可以使用 TouchableWithoutFeedback, as it supports onLongPress 功能。

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

如何在 React Native (expo) 中获取点击事件（单、双、长）？

How can I get the click event (single, double, long) in react native (expo)?

react-native

touchableopacity

expo