React Native 防止双击 [英] React Native Prevent Double Tap

问题描述

我有一个 TouchableHighlight 包裹了一个 Text 块，当点击该块时，会打开一个新场景(我使用的是 react-native-router-flux).
一切正常，除了如果您快速点击 TouchableHighlight，场景可以渲染两次.
我想阻止用户快速点击该按钮.

I have a TouchableHighlight wrapping a Text block that when tapped, opens a new scene (which I'm using react-native-router-flux).
It's all working fine, except for the fact that if you rapidly tap on the TouchableHighlight, the scene can render twice.
I'd like to prevent the user from rapidly being able to tap that button.

在 Native 中实现此目的的最佳方法是什么?我研究了手势响应器系统，但没有任何示例或任何类似的东西，如果你像我一样是新手，这会让人感到困惑.

What is the best way to accomplish this in Native? I looked into the Gesture Responder System, but there aren't any examples or anything of the sort, which if you're new, like me, is confusing.

推荐答案

你想要做的是限制你的 on tap 回调，这样它们只会运行一次.

What you're trying to do is you want to limit your on tap callbacks, so that they will only run ONCE.

这称为限制，您可以使用下划线:方法如下:

_.throttle(
    this.thisWillRunOnce.bind(this),
    200, // no new clicks within 200ms time window
);

这就是我的 React 组件的外观.

Here's how my react component looks after all.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
     _.throttle(
        this.onPressThrottledCb.bind(this),
        200, // no new clicks within 200ms time window
    );
  }
  onPressThrottledCb() {
    if (this.props.onPress) {
      this.props.onPress(); // this only runs once per 200 milliseconds
    }
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onPressThrottledCb}>
        </TouchableOpacity>
      </View>
    )
  }
}

希望对你有帮助.如果您想了解更多信息，请查看此主题.

I hope this helps you. In case you wanna learn more check this thread.

这篇关于React Native 防止双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！