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：

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)