Reagieren Nativen Verhindern, Dass Double Tap

Ich habe eine TouchableHighlight Verpackung einer Text block, dass, wenn geklickt wird, öffnet sich eine neue Szene (die ich verwende reagieren-native-router-flux).

Alles funktioniert gut, außer für die Tatsache, dass, wenn Sie schnell Tippen Sie auf die TouchableHighlight kann die Szene zweimal Rendern.

Ich möchte verhindern, dass die Benutzer schnell in der Lage, Tippen Sie die Schaltfläche an.

Was ist der beste Weg, dies zu erreichen in Native? Ich sah in der Geste-Responder-System, aber es gibt keine Beispiele, oder etwas von der Sorte, die wenn du neu bist, wie ich, ist verwirrend.

Hast du eine Lösung finden?
hat eine von diesen Antworten, die Arbeit für Ihren Fall?

InformationsquelleAutor efru | 2016-03-23

react-native

6

Was Sie zu tun versuchen ist, die Sie möchten zu beschränken, die auf Tippen Sie auf Rückrufe, so dass Sie nur EINMAL ausgeführt.

Dies wird als Drosselung, und Sie können underscore für die:
Hier ist, wie:
```
_.throttle(
    this.thisWillRunOnce.bind(this),
    200, //no new clicks within 200ms time window
);
```
Hier ist, wie meine reagieren Komponente Aussehen nachdem alle.
```
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>
    )
  }
}
```
Ich hoffe das hilft dir.
Im Falle dass Sie wollen lernen mehr überprüfen dieser thread.
- By doing so, ich konnte nicht übergeben Sie Parameter an die Funktion, wie dies onPress={()=>this.onPressThrottledCb(data)}
- lodash oder Unterstrich, ist die Durchführung von Gas-alle übergeben Parameter an die Funktion automatisch
- Jetzt mit Unterstrich und die params tun, überholt zu werden.
- was meinst du es funktioniert nicht? Bekommst du irgendwelche Fehler? Kannst du Debuggen, um zu sehen, wenn der callback aufgerufen wird?
- ist mit this.onPressThrottledCb.bind(this) statt this.onPressThrottledCb noch notwendig, wenn die Methode definiert ist als Eigenschaft einer Klasse? also onPressThrottledCb = () => {...}
InformationsquelleAutor SudoPlz

Folgende Werke durch die Verhinderung von routing auf dem gleichen Weg zweimal:

import { StackNavigator, NavigationActions } from 'react-navigation';

const App = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

//Prevents double taps navigating twice
const navigateOnce = (getStateForAction) => (action, state) => {
    const { type, routeName } = action;
    return (
        state &&
        type === NavigationActions.NAVIGATE &&
        routeName === state.routes[state.routes.length - 1].routeName
    ) ? state : getStateForAction(action, state);
};
App.router.getStateForAction = navigateOnce(App.router.getStateForAction);

Wenn Sie die gleiche Bildschirm zweimal, wird dies scheitern. Zum Beispiel eine quiz-app.
Ja, die Antwort heißt es, es funktioniert durch die Verhinderung werde den gleichen Weg zweimal. Wenn dieses nicht geeignet ist, dann verwenden Sie eine andere Methode. In den meisten Fällen ist es geeignet
In meinem vorherigen Projekt, war schön aber jetzt ist es erzeugt eine Warnung: undefined ist kein Objekt (evaluating 'routeConfigs[initialRouteName].params'). Wie kann ich dieses Problem lösen?

InformationsquelleAutor Paul Dolphin

2

Vielleicht könnten Sie die neue disable-feature eingeführt, für berührbare Elemente 0.22? Ich denke, so etwas wie dieses:

Komponente
```
<TouchableHighlight ref = {component => this._touchable = component}
                    onPress={() => this.yourMethod()}/>
```
Methode
```
yourMethod() {
    var touchable = this._touchable;
    touchable.disabled = {true};

    //what you actually want your TouchableHighlight to do
}
```
Ich noch nicht selber ausprobiert. Also ich bin mir nicht sicher, ob es funktioniert.
- so aktivieren Sie es wieder, wenn der Benutzer wieder aus der hart codierte android-Schaltfläche "zurück".?
InformationsquelleAutor swescot

Ich es so machen:

link(link) {
        if(!this.state.disabled) {
            this.setState({disabled: true});
            //go link operation
            this.setState({disabled: false});
        }
    }
    render() {
        return (
            <TouchableHighlight onPress={() => this.link('linkName')}>
              <Text>Go link</Text>
            </TouchableHighlight>
        );
    }

InformationsquelleAutor Batuhan Akkaya

1

Könnten Sie bounce den klicken Sie an den eigentlichen Empfänger Methoden, insbesondere im Umgang mit dem Staat für visuelle Effekte.
```
_onRefresh() {    
    if (this.state.refreshing)
      return
    this.setState({refreshing: true});
```
InformationsquelleAutor goodhyun
1

Wenn Sie react-navigation Sie können eine key Eigenschaft navigate um sicherzustellen, dass nur eine Instanz je dem Stapel Hinzugefügt.

über https://github.com/react-navigation/react-navigation/issues/271

InformationsquelleAutor Jeevan Takhar
0

Ich den Fehler behoben, indem erstellen ein Modul, welches eine Funktion aufruft, die nur einmal in das übergebene Intervall.

Beispiel: Wenn Sie navigieren möchten, von zu Hause aus -> Über Und Sie drücken die Schaltfläche Über zweimal sagen 400 ms.
```
navigateToAbout = () => dispatch(NavigationActions.navigate({routeName: 'About'}))

const pressHandler = callOnce(navigateToAbout,400);
<TouchableOpacity onPress={pressHandler}>
 ...
</TouchableOpacity>
The module will take care that it calls navigateToAbout only once in 400 ms.
```
Hier ist der link zu der NPM-Modul: https://www.npmjs.com/package/call-once-in-interval

InformationsquelleAutor Rahul Gaba
0

Nachdem ich mehrere github-threads, ALSO die Artikel und versuchen, die meisten Lösungen, die ich selbst gekommen, zu den folgenden Schlussfolgerungen:
1. Bereitstellung einer zusätzlichen key parameter zu tun "idempotent schiebt" nicht konsistent funktioniert jetzt.
  https://github.com/react-navigation/rfcs/issues/16
2. Mit debounce verlangsamt die UX deutlich. Die navigation geschieht nur X ms, nachdem der Benutzer den Knopf gedrückt der letzten Zeit. X muss groß genug sein, um die Zeit zu überbrücken, wo die double taps passieren könnte. Das könnte alles sein, von 100-600ms wirklich.
3. Mit _.throttle funktionierte nicht für mich. Es rettete die gedrosselt Funktionsaufruf ausgeführt, nachdem der timer lief, resultierend in einer verzögerten double tap.
Ich überlegt auf react-native-navigation aber anscheinend das Problem liegt tiefer und Sie erleben es auch.

So jetzt baute ich meinen eigenen hack mischt sich mit meinem code die wenigsten:
```
const preventDoubleTapHack = (component: any, doFunc: Function) => {
  if (!component.wasClickedYet__ULJyRdAvrHZvRrT7) {
    // eslint-disable-next-line no-param-reassign
    component.wasClickedYet__ULJyRdAvrHZvRrT7 = true;
    setTimeout(() => {
      // eslint-disable-next-line no-param-reassign
      component.wasClickedYet__ULJyRdAvrHZvRrT7 = false;
    }, 700);
    doFunc();
  }
};
```
überall, wo wir navigieren statt
```
this.props.navigation.navigate('MyRoute');
```
tun
```
preventDoubleTapHack(this, () => this.props.navigation.navigate('MyRoute');
```
Schön.

InformationsquelleAutor David Nathan

Können Sie tun, mit debounce sehr einfache Weise

import debounce from 'lodash/debounce';

componentDidMount() {

       this.yourMethod= debounce(this.yourMethod.bind(this), 500);
  }

 yourMethod=()=> {
    //what you actually want your TouchableHighlight to do
}

<TouchableHighlight  onPress={this.yourMethod}>
 ...
</TouchableHighlight >

InformationsquelleAutor Rajesh Nasit

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.