React导航改变标签导航器上的标签图标动态

Question

所以我是新来对本地和redux作出反应。该应用已被配置（由其他人）拥有react-navigation和redux。现在我们使用TabNavigator（底部）作为我们的菜单，而TabNavigator也包含登录按钮。现在我想要做的是当用户登录时，登录按钮（带有文本和图标）变为登出。

有没有办法做到这一点？我的TabNavigator也在一个单独的文件中。

我要的是这样的：

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} 
) 

在此先感谢。

Answer 1

可以使用终极版做到这一点：

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; 

那么你的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" 
    }) 
    } 
}) 

编辑：

在你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)