Comment faire pour rediriger vers l'écran de connexion dans l'onglet de navigation de réaction navigator avec redux

Question

J'essaie de comprendre comment coder ceci. J'utilise Rational Navigation TabNavigator comme navigateur principal et j'utilise également Redux pour gérer mon application et l'état d'authentification de l'utilisateur.

Un des onglets a du contenu qui ne peut être affiché que si l'utilisateur est connecté. Ce que j'essaie de faire, c'est quand il appuie sur cet onglet, s'il n'est pas encore connecté, je veux rediriger vers ou un modal en haut avec un écran de connexion/enregistrement. Une fois qu'ils se sont connectés avec succès et que leur contenu a été supprimé, je veux afficher l'écran dans l'onglet qu'ils essayaient à l'origine de voir. Alors, comment allez-vous à ce sujet? D'après ce que je comprends du TabNavigator, après la charge initiale, componentWillMount ne s'exécute pas chaque fois que je clique sur cet onglet, donc je ne peux pas vérifier mon état auth et réagir.

Existe-t-il un moyen d'intercepter l'onglet presse sinon et être en mesure de vérifier mon état auth à partir de là avant de charger la vue pour cet onglet?

Answer 1

Tout d'abord, vous devez activer paresseux des options sur config TabNavigator, par exemple:

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

En second lieu, ajouter ce paquet react-navigation-is-focused-hoc

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

Il est pour l'écran actif contrôle, sur réagir rendre AppNavigator ajouter quelques accessoires:

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

Le dernier, ajouter IsFocused à votre écran assermentée (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) est l'état de vos réducteurs auth