Wie umleiten Bildschirm anmelden mit redux Navigation Registerkarte Navigator reagieren

Question

Ich versuche, herauszufinden, wie etwa Codierung dies zu gehen. Ich verwende einen React Navigation TabNavigator als Hauptnavigator und verwende Redux, um den App-Status und den Authentifizierungsstatus meiner App zu verwalten.

Eine der Registerkarten enthält Inhalte, die nur angezeigt werden können, wenn der Benutzer angemeldet ist. Ich versuche also, diese Registerkarte zu drücken, wenn sie noch nicht angemeldet sind ein Modal oben mit einem Anmelde-/Registrierungsbildschirm. Nachdem sie sich erfolgreich angemeldet haben und ihr Inhalt heruntergezogen wurde, möchte ich den Bildschirm in der Registerkarte anzeigen, die sie ursprünglich anzeigen wollten. Also, wie würdest du das machen?

Von meinem Verständnis mit dem TabNavigator, nach dem ersten Laden dann ComponentWillMount nicht jedes Mal, wenn ich auf diese Registerkarte klicken, so kann ich nicht überprüfen, meine Auth Zustand und reagieren.

Gibt es eine Möglichkeit die Registerkarte Presse anders und in der Lage zu abfangen meines Auth Zustand von dort zu überprüfen, bevor die Ansicht für diese Register Laden?

Answer 1

Zuerst müssen Sie faul Optionen auf TabNavigator Config, zum Beispiel aktivieren:

const AppNavigator = TabNavigator(
    { 
    Home: { screen: HomeScreen }, 
    LoginScreen: { screen: LoginScreen }, 
    /* the screen needed auth */ 
    AddPost: {screen: AddPostScreen}, 
    ... 
    }, 
    { 
    lazy: true, 
    ... 
}) 

Zweitens, ich dieses Paket für die Überprüfung aktiven Bildschirm react-navigation-is-focused-hoc

$ yarn add react-navigation-is-focused-hoc

Es ist hinzuzufügen, auf reagiert machen AppNavigator einige Requisiten hinzufügen:

... 
import { updateFocus } from 'react-navigation-is-focused-hoc'; 
... 
return (
    ... 
    <AppNavigator 
     onNavigationStateChange={(prevState, currentState) => { 
     updateFocus(currentState); 
     }} 
    /> 
    ... 
); 

Das letzte, fügen isFocused zu Ihrem authentifizierte Bildschirm (AddPostScreen):

import { withNavigationFocus } from 'react-navigation-is-focused-hoc'; 
... 
@withNavigationFocus('AddPostScreen') 
class AddPostScreen extends React.Component { 
    static navigationOptions =() => ({ 
     /* Your navigation options */ 
    }) 

    componentWillReceiveProps(nextProps) { 
    const { isFocused, auth: { signedIn }, navigation: { navigate } } = this.props; 
    if (!isFocused && nextProps.isFocused && !signedIn) { 
     navigate('LoginScreen'); 
    } 
    } 

    shouldComponentUpdate(nextProps) { 
    const { isFocused } = this.props; 
    if (isFocused && !nextProps.isFocused) { 
     return true; 
    } 

    // Don't update if the screen is not focused 
    if (!isFocused && !nextProps.isFocused) { 
     return false; 
    } 

    // Update the screen if its re-enter 
    return !isFocused && nextProps.isFocused; 
    } 

    render() { 
     return (
     /* return authenticated component */ 
     ... 

signedIn (boolean) Zustand von Ihrem Auth Minderer ist