Wie erstellt man einen eindeutigen Schlüssel für NavigationStateUtils mit Push-Route in Reactive Native / Redux?

8

Momentan habe ich sowohl Push als auch Pop mit Hilfe von NavigationStateUtils unter React Native / Redux eingerichtet. Wenn jedoch eine Schaltfläche, die die Push-Aktion auslöst, mehrmals gedrückt wird, erhalte ich den Fehler: should not push * route with duplicated key und * für route.key oder this.props.navKey .

Was könnte die Ursache des Fehlers sein? Wie soll ich einen eindeutigen Schlüssel für jede einzelne Route mit NavigationStateUtils erstellen?

Das ist meine Einrichtung - Redux:

%Vor%

Mein Reduzierer ( navReducer.js ):

%Vor%

Und diese Methoden behandeln Push und Pop und wie Navigationsleiste zurück (Pop) eingestellt ist:

%Vor%

Und von Komponenten wie folgt aufgerufen:

%Vor%

Konsolenprotokoll bearbeiten

EDIT 2 Fortsetzung

EDIT 3 Slide Menu

    
Jo Ko 06.09.2016, 03:16
quelle

1 Antwort

4

Debuggen Sie Ihre Navigation Reducer wie folgt:

%Vor%

BEARBEITEN

Aufgrund der Art und Weise NavigationStateUtils.push Werke (siehe hier ), es erfordert eine völlig neue Route, um zum Routenstapel zu gelangen. Basierend auf Ihrem Navigationsfluss können Sie ihn nicht mehr verwenden, um nach Hause zurückzukehren. Sie müssen eine andere Funktion verwenden, wie zum Beispiel NavigationStateUtils.pop oder NavigationStateUtils.reset und andere (erkunden Sie diese Datei). Sie sind jedoch nicht nur auf die Funktionen in NavigationStateUtils beschränkt, Sie können auch Ihre eigenen Änderungen im Reducer definieren, aber Sie müssen sicherstellen, dass der Navigationszustand dieses Datenformat hat:

%Vor%

BEARBEITEN

Auf der Basis Ihrer Anforderungen in Ihre Kommentare, eine Schublade Artikel jedes Mal, wenn Ihr Hit, muss es auf Setzen Sie Ihren Navigationsrouten-Stack mit dieser Route als Startpunkt zurück, dann können Sie mit dem Drücken und Poppen beginnen.

%Vor%

Als weitere Randnotiz sehe ich, dass es basierend auf Ihren Anforderungen wahrscheinlich eine gute Idee wäre, zu verwenden react-native-router-flux , weil Sie in der Lage sein werden, der Routen , Unter -routes , integrieren mit react-native-drawer und integriere mit Redux .

    
rclai 14.09.2016, 23:16
quelle