React-Navigation mehrerer Bildschirminstanzen verhindern

Eine schnelle Lösung für ein Problem react-navigation Verhindern Sie zweimaliges Navigieren, wenn Sie schnell auf eine Schaltfläche klicken #271

HINWEIS: Dies ist eine Problemumgehung für React-Navigation (v1), in v2 ist dieses Problem behoben.

Inhalt

MultiTapHandler

Das Konzept, das den Tag rettet, heißt Drosselung.

export default (func, wait = 500) => {
    let tapCount = 0;
    let handler;

    return function() {
        if (tapCount === 0) {
            tapCount++;
            func();
        }
        // Clear the previous timeout and set a new one.
        clearTimeout(handler);
        handler = setTimeout(() => (tapCount = 0), wait);
    };
};

Verwendungszweck

onPress={multipleTapHandler(() => this.doSomethingCool())}

Beispiel

Mit Reagieren

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import multipleTapHandler from 'multipleTapHandler';

class Button extends Component {
  render() {
    return (
      <TouchableOpacity
        {...this.props}
        onPress={multipleTapHandler(() => this.props.onPress(), this.props.ignoreMultipleTouches ? 500 : 0)}
      />
    );
  }
}

Button.defaultProps = {
  ignoreMultipleTouches: false
};

Button.propTypes = {
  ignoreMultipleTouches: PropTypes.bool
};

export default Button;

Ohne Reagieren

import multipleTapHandler from 'multipleTapHandler';

// Tap Event
const onTap = () => {
  console.log("onTapEvent called.")
}

// Actual user Tap.
tap = multipleTapHandler(() => {onTap()})

// Helper
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  // Loops mimics the user tap frequency.
  for (let i=0; i < 10; i++){
    tap()
    // tapping this 10 times after every 100 milliseconds.
    await sleep(100)
  }
}

main()

Fazit

Vielen Dank für das Lesen dieses Beitrags – ich hoffe, Sie fanden das hilfreich. Sie finden mich auf GitHub, LinkedIn und CodeMentor. Wenn Sie Fragen haben, können Sie sich gerne an mich wenden!
Weitere Beiträge:

Similar Posts

Leave a Reply

Your email address will not be published.