React Navigation 탭 네비게이터에서 탭 아이콘을 동적으로 변경

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 : 귀하가 TabNavigator 파일 내의 다음

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; 

:

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)