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

あなたはReduxの使用してそれを行うことができます。

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)