如何正确使用 React Native onLongPress？答案

【问题标题】：How do I use React Native onLongPress properly?如何正确使用 React Native onLongPress？
【发布时间】：2018-11-28 18:15:30
【问题描述】：

我有一段简单的代码，它只是一个带有 onLongPress 道具的 TouchableOpacity，但它似乎不起作用。

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

我已尝试删除延迟道具，但仍然无法正常工作。然而，将 onLongPress 更改为 onPress 似乎确实有效，但我想要长按功能。我正在 Android 模拟器上对此进行测试。

【问题讨论】：

标签： react-native react-native-android touchableopacity touchablehighlight touchablewithoutfeedback

【解决方案1】：

根据this issue，这是在启用了 React Native Debugger 的真实设备上进行测试后随机发生的。禁用 React Native Debugger 将使您的问题消失。

【讨论】：

delayLongPress={10} 将函数调用延迟 10 毫秒，这就是为什么它看起来是即时的。例如，尝试将其设置为 > 1000 的值。
没关系，onLongPress 没有被调用。

【解决方案2】：

如果您想在长按时显示视图并在释放时将其隐藏：

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



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

【讨论】：

【解决方案3】：

您可以在 IOS 模拟器或发布包中进行测试。

【讨论】：