React Native ダブルタップ防止 質問する

React Native ダブルタップ防止 質問する

タップすると新しいシーンが開くTouchableHighlightラップ ブロックがあります(react-native-router-flux を使用しています)。 をすばやくタップするとシーンが 2 回レンダリングされる可能性がある点を除けば、すべて正常に動作しています。ユーザーがそのボタンをすばやくタップできないようにしたいと思います。Text
TouchableHighlight

Native でこれを実現する最善の方法は何ですか? Gesture Responder System を調べましたが、例やそのようなものはなく、私のように初心者にとっては混乱するでしょう。

ベストアンサー1

やろうとしていることは、オンタップ コールバックを制限して、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>
    )
  }
}

これがお役に立てば幸いです。さらに詳しく知りたい場合はこのスレッド

おすすめ記事