如何正確使用 React Native onLongPress？

Question

我有一段簡單的代碼，它只是一個帶有 onLongPress 道具的 TouchableOpacity，但它似乎不起作用。

<TouchableOpacity delayLongPress={10} onLongPress={()=>{console.log("pressed")}} activeOpacity={0.6}>
  <Text>BUTTON</Text>
</TouchableOpacity>

我試過刪除延遲道具，但這仍然不起作用。 然而，將 onLongPress 更改為 onPress 似乎確實有效，但我想要長按功能。 我正在 Android 模擬器上對此進行測試。

Answer 1

根據這個問題，這是隨機發生的，在啟用 React Native Debugger 的真實設備上進行測試后。 禁用 React Native Debugger 將使您的問題消失。

Answer 2

如果要在長按時顯示視圖並在釋放時隱藏它：

<TouchableOpacity
    onPress={this._onPress}
    onLongPress={this._onLongPress}
    onPressOut={this._onPressOut}
>
            ....
</TouchableOpacity>



_onLongPress = () => {
    this.setState({
        modalVisible: true
    })
}
_onPressOut = () => {
    this.setState({
        modalVisible: false
    })
}

Answer 3

我將以下代碼與“ react”一起使用：“ 16.6.3”和“ react-native”：“ 0.58.5”

<TouchableOpacity
    onLongPress={this.handlerLongClick}
    onPress={this.handlerClick}
    activeOpacity={0.6}
    style={styles.button}>
        <Text style={styles.TextStyle}> LONG PRESS THE BUTTON </Text>
</TouchableOpacity>

現在的關鍵是一切都正常，因此我認為以前的版本中存在一個錯誤，現在一切正常。

Answer 4

您可以在 IOS 模擬器或發布包中進行測試。