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)