Frage react-navigation: Erkennt, wenn der Bildschirm aktiviert ist / erscheint / Fokus / Unschärfe


Wenn ich beim Öffnen des Bildschirms einige Aktionen ausführen möchte, lege ich sie in componentDidMount ab. Zum Beispiel kann ich einige Daten holen.

so was.

componentDidMount() {
  this.updateData();
}

Aber mit react-navigation KomponenteDidMount tritt nur einmal auf, wenn der Benutzer das erste Mal öffnet, und wenn ein späterer Benutzer diese Seite erneut öffnet, wird componentDidMount nicht ausgelöst.

Was ist der richtige Weg, um zu erkennen, wenn die Seite (Bildschirm) aktiviert ist und Aktionen ausführt?


5
2018-05-11 10:59


Ursprung


Antworten:


Mit react-navigation, Das kannst du machen. Fügen Sie diesen Code hinzu componentDidMount

    this.subs = [
      this.props.navigation.addListener('didFocus', () => this.updateData()),
    ];

Und in componentWillUnmount machen

    componentWillUnmount() {
      this.subs.forEach(sub => sub.remove());
    }

Weitere Details finden Sie in diesem PR: https://github.com/react-navigation/react-navigation/pull/3345

Aktualisiert:

addListener - Abonnieren Sie Aktualisierungen des Navigationslebenszyklus

React Navigation gibt Ereignisse aus, um Komponenten zu prüfen, die abonniert wurden   Sie:

  • willBlur - Der Bildschirm wird nicht fokussiert

  • willFocus - Der Bildschirm wird fokussiert

  • didFocus - der Bildschirm fokussiert (wenn es einen Übergang gab, den   Übergang abgeschlossen)

  • didBlur - der Bildschirm nicht fokussiert (wenn es einen Übergang gab, der   Übergang abgeschlossen)

Ref: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle


7
2018-05-11 11:03



componentDidMount / componentWillUnmount funktioniert nicht in allen Fällen der Navigation (wie Tabs).

Sie müssen verwenden addListener mit Ereignissen didFocus und DidBlur um solche Aktionen zu machen. Sehen Dokumentation für Details


1
2018-05-11 12:31



Vielleicht versuchen Sie ComponentDidUpdate und setzen Sie einen Zustand innerhalb Ihrer Komponente. Wenn sich der Status ändert, erfolgt das erneute Rendern


0
2018-05-11 12:27