Réagir Navigation icônes de changement de tabulation sur l'onglet de façon dynamique

Question

Donc, je suis nouveau à réagir natif et redux. L'application est déjà configurée (par quelqu'un d'autre) pour avoir react-navigation et redux. Maintenant, nous utilisons un TabNavigator (en bas) pour notre menu et ce TabNavigator contient également le bouton de connexion. Maintenant, ce que je veux faire est quand l'utilisateur se connecte, le bouton de connexion (avec le texte et l'icône) devient Déconnexion.

Y a-t-il un moyen de faire cela? Aussi mon TabNavigator est dans un fichier séparé.

Ce que je veux est quelque chose comme ceci:

TabNavigator(
    { 
    ...other screens, 
    //show this only if not logged in 
    Login: { 
     screen: LoginScreen 
    }, 
    //show this only if logged in 
    Logout: { 
     screen: //There should be no screen here just the logout functionality 
    } 
    }, 
    {...options here} 
) 

Merci à l'avance.

Answer 1

Vous pouvez le faire en utilisant Redux:

AuthIcon.js:

const LOGGED_IN_IMAGE = require(...) 
const LOGGED_OUT_IMAGE = require(...) 

class AuthIcon extends React.Component { 
    render() { 
    const { loggedIn, focused, tintColor } = this.props 
    // loggedIn is what tells your app when the user is logged in, you can call it something else, it comes from redux 
    return (
     <View> 
     <Image source={loggedIn ? LOGGED_IN_IMAGE : LOGGED_OUT_IMAGE} resizeMode='stretch' style={{ tintColor: focused ? tintColor : null, width: 21, height: 21 }} /> 
     </View> 
    ) 
    } 
} 

const ConnectedAuthIcon = connect(state => { 
    const { loggedIn } = state.auth 
    return { loggedIn } 
})(AuthIcon) 

export default ConnectedAuthIcon; 

puis dans votre fichier TabNavigator:

import ConnectedAuthIcon from './AuthIcon.js' 

export default TabNavigator({ 
    Auth: { 
    screen: Auth, 
    navigationOptions: ({ navigation }) => ({ 
     tabBarLabel: null, 
     tabBarIcon: ({ tintColor, focused }) => <ConnectedAuthIcon tintColor={tintColor} focused={focused} />, 
     title: "Auth" 
    }) 
    } 
}) 

Edit:

Dans votre Auth.js :

class Auth extends React.Component { 

    render() { 
    const { loggedIn } = this.props 
    if (loggedIn) { 
     return <Profile /> 
    } else { 
     return <Login /> 
    } 
    } 

} 

export default connect(state => { 
    const { loggedIn } = state.auth 
    return { loggedIn } 
})(Auth)