React Navigation 动态更改选项卡导航器上的选项卡图标 [英] React Navigation changing tab icons on tab navigator dynamically

问题描述

所以我是对原生和 redux 做出反应的新手.该应用程序已经(由其他人)配置为具有 react-navigation 和 redux.现在我们在菜单中使用 TabNavigator(底部)，这个 TabNavigator 还包含登录按钮.现在我想要做的是当用户登录时，登录按钮(带有文本和图标)变为注销.

So I am new to react native and redux. The app is already configured (by someone else) to have react-navigation and redux. Now we're using a TabNavigator (bottom) for our menu and this TabNavigator also contains the Login button. Now what I want to do is when the user logs in, the Login button (with text and icon) becomes Logout.

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

Is there a way to do that? Also my TabNavigator is in a separate file.

我想要的是这样的:

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

提前致谢.

推荐答案

你可以使用 Redux:

You can do it using Redux:

AuthIcon.js:

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 文件中:

then inside your TabNavigator file:

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 中:

In your 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)

这篇关于React Navigation 动态更改选项卡导航器上的选项卡图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！