wake-up-neo.com

Richtige Navigation mit React Native, Redux und Navigator

Ich habe eine React Native-App mit dem Redux-Framework und verwende die Navigator-Komponente zur Navigation. Ich hatte ein bisschen Probleme damit, die Navigation zum Laufen zu bringen, und ich kann keine guten Beispiele finden, wie man es richtig macht, also suche ich Hilfe und Klarstellung.

Hier ist das Wesentliche von dem, was ich derzeit habe, was funktioniert, aber ich weiß nicht, ob ich es richtig mache:

Wurzelkomponente

...
renderScene(route, navigator) {
    console.log('RENDER SCENE', route);
    const Component = route.component;
    return (
        <Component navigator={navigator} route={route} {...this.props} />
    )
}

render() {
    return (
        <Navigator
            renderScene={(route, nav) => this.renderScene(route, nav)}
            initialRoute={{ name: 'Signin', component: Signin }} />
    )
}

Signin-Komponente

...
componentWillReceiveProps(nextProps) {
    if (!this.props.signedIn && nextProps.signedIn) {
        console.log('PUSHING TO MAIN');
        nextProps.navigator.Push({ name: 'Main', component: Main });
    }
}

Fragen:

1: Mein erster Gedanke hier ist, dass ich den navigator.Push-Code wahrscheinlich in eine Aktion verschieben sollte. Ist jedoch componentWillReceiveProps der richtige Ort, um die Aktion aufzurufen? Wenn die Signin-Komponente geladen wird, löst sie eine Aktion aus, um den Benutzer anzumelden, wenn er bereits eine aktive Sitzung hat. Standardmäßig sind sie nicht angemeldet. Wenn die nächsten Requisiten durchkommen, überprüfe ich, ob sich die Requisiten geändert haben, und drücken Sie dann auf Main.

2: In meinem Konsolenprotokoll, unmittelbar nachdem "Push TO MAIN" protokolliert wurde, werden zwei Protokolle "RENDER SCENE" angezeigt:

[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (EXPECTED)
[info] 'PUSHING TO MAIN'
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (WHY?)
[info] 'RENDER SCENE', { name: 'Main', component: [Function: Main] }

Ich bin neugierig, warum RENDER SCENE zweimal aufgerufen wird (die erste ist die Komponente Signin), wenn ich nur die Komponente Main schiebe.

Auch ursprünglich in der componentWillReceiveProps-Methode habe ich nur geprüft:

if (nextProps.signedIn) {
    nextProps.navigator.Push({ name: 'Main', component: Main });
}

dies führte jedoch dazu, dass die Main-Komponente zweimal gedrückt wurde.

29
DennyFerra

HINWEIS: Der GitHub-Link unten ist jetzt veraltet, in den Kommentaren der Autor schlug vor, Reaktiver-Router-Fluss der von der gleichen .__ ist. Autor.

Ich habe gerade die Unterstützung für Redux mit meiner neuen Komponente https://github.com/aksonov/react-native-redux-router hinzugefügt - mit, die die Navigation ziemlich einfach macht, wie das Aufrufen von Actions.login

10
aksonov

Dies ist keine Redux-Implementierung, aber für das Routing habe ich den reaktiven Fluss des Flusses als wirklich nützlich erachtet.

Sie können Dinge wie anrufen 

Actions.login 

um zur Anmeldeansicht zu navigieren. Die Routen sind in Ihrer Indexdatei definiert und verfügen über optionale Schemas zum Definieren von Navigationsleistenelementen.

https://github.com/aksonov/react-native-router-flux

3
ithinkiknowruby

1) Ja, verschieben Sie die Methode, componentWillReceiveProps ist wahrscheinlich nicht korrekt. Es ist schwierig, diesen Teil für Sie umzuformen, da ich diese Logik für diese Komponente nicht verwenden würde, d. H. Das signinComp sollte den Status erhalten, ob es eine Auth-Sitzung hat oder nicht (und nicht für sich selbst herauszufinden). Es führt dazu, dass es ohne Grund verarbeitet wird. denn wenn er eingeloggt ist, leiten Sie um. Ich würde das persönlich in renderScene checken, da das Nav weitergegeben wird, können Sie einfach einen Push/Pop auf untergeordneten Komponenten erstellen und all Ihre Logik in einem renderScene behandeln.

2) Sehen Sie den Navigationsstapel wie einen Kartenstapel. Wenn Sie die Szene festlegen, handelt es sich um eine Karte, aber beim Drücken von Push wird eine weitere Karte zum Stapel hinzugefügt. Wenn Sie also zwei Karten drücken, wird überprüft, ob alle Karten aufgedeckt und gerendert sind. Wenn Sie sie zurückdrücken oder knallen, werden sie zu einer vollständigen Karte oder Szene zurückversetzt. Stellen Sie sich vor, Sie würden 5 Szenen sofort auf den Stapel schieben. Wenn Sie also den Stapel ändern, wird geprüft, ob alles wiedergegeben wird und für die Zurück-Schaltfläche bereit ist. Ich persönlich finde das nicht optimal (aber es muss sein, da Sie mit jeder Szene, die Sie drücken, unterschiedliche Eigenschaften übergeben können).

Sie können diese Zeile wahrscheinlich ändern in:

    renderScene={this.renderScene}
2
Tjorriemorrie

Frage 1:
Ich empfehle, dass Sie die Navigatorlogik in der Methode 'intoComponentUpdate' verarbeiten,

   shouldComponentUpdate(nextProps, nextState){

    if(nextProps.isLoggedIn != this.props.isLoggedIn && nextProps.isLoggedIn === true){
        //will redirect
        // do redirect option

        return false;
    }

    return true;
}

Die Frage 2:
Ich glaube, das ist der Bug von Reactative.

0
deju