React Native防止双击

Question

我有一个TouchableHighlight包裹Text块,当点击时,打开一个新场景(我正在使用react-native-router-flux).
这一切都很好,除了你快速点击它的事实,TouchableHighlight场景可以渲染两次.
我想阻止用户快速点击该按钮.

在Native中实现这一目标的最佳方法是什么？我查看了手势响应系统,但没有任何示例或类似的东西,如果你是新的,像我一样,令人困惑.

Answer 1

您要尝试做的是要限制点击回调，以便它们仅运行一次。

这称为节流，您可以使用underscore它：方法 如下：

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

毕竟，这是我的react组件的外观。

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>
    )
  }
}

我希望这可以帮助你。如果您想了解更多信息，请检查此线程。

Answer 2

也许您可以使用 0.22 中为可触摸元素引入的新禁用功能？我在想这样的事情：

成分

<TouchableHighlight ref = {component => this._touchable = component}
                    onPress={() => this.yourMethod()}/>

方法

yourMethod() {
    var touchable = this._touchable;
    touchable.disabled = {true};

    //what you actually want your TouchableHighlight to do
}

我自己没试过。所以我不确定它是否有效。