用户登录后，使用我的个人资料选项卡动态更改登录选项卡

Posted 2023-02-22

【中文标题】用户登录后，使用我的个人资料选项卡动态更改登录选项卡

【英文标题】：Dynamically change Login Tab with My Profile tab after the user has logged in

【发布时间】：2019-08-04 22:49:07

【问题描述】：

在应用启动时，会显示“登录”底部标签。我想要实现的是在用户登录应用程序后将显示的“登录”选项卡更改为“我的个人资料”选项卡。

我使用 Redux 来存储应用程序的登录状态，并且我设法获取了状态，但我不知道如何使用它来动态更改选项卡。

这是声明的两个选项卡：

// MainTabNavigator.js

const LoginStack = createSwitchNavigator(
  Login: LoginScreen,
);

LoginStack.navigationOptions = 
  tabBarVisible: true,
  tabBarLabel: 'Login',
  tabBarIcon: ( focused ) => (
    <TabBarIcon
      focused=focused
      name=Platform.OS === 'ios' ? 'ios-link' : 'md-link'
    />
  ),


const MyProfileStack = createSwitchNavigator(
  MyProfile: HomeScreen,
);

MyProfileStack.navigationOptions = (navigation) => (
  tabBarVisible: true,
  tabBarLabel: 'My Profile',
  tabBarIcon: ( focused ) => (
    <TabBarIcon
      focused=focused
      name=Platform.OS === 'ios' ? 'ios-person' : 'md-person'
    />
  ),
)

export default createBottomTabNavigator( LoginStack )

我尝试创建另一个组件并连接它，然后将其导入选项卡页面文件，但我无法使用 IsLoggedIn() 的返回值。

// IfLoggedIn.js

function IsLoggedIn(props) 
  return props.loginState.isLoggedIn ? true : false


const mapStateToProps = ( loginState ) => (
  loginState
);

const mapDispatchToProps = (dispatch) => bindActionCreators(
  setLoginState
, dispatch);

export default connect(mapStateToProps,mapDispatchToProps)(IsLoggedIn)

我在想我可以像这样在标签页文件中使用它：

// MainTabNavigator.js

const InterChangeTab = IsLoggedIn ? MyProfileStack : LoginStack
export default createBottomTabNavigator( InterChangeTab )

但它不起作用，因为 IsLoggedIn 是一个组件而不是常规函数。

【问题讨论】：

将其设置为具有重新渲染的状态。

@SnehaBharti 我认为我们在使用状态时遇到了同样的问题：github.com/react-navigation/react-navigation/issues/1171，你如何重新渲染反应导航？

yes.. 构建 2 个功能.. 1 个用于登录前，一个用于登录后，并使用条件使它们工作

@SnehaBharti 对不起，我不明白，我应该在哪里创建这 2 个函数？

【参考方案1】：

为什么不直接在您的IfLoggedIn 上返回您的LoginStack 或MyProfileStack？

function IsLoggedIn(props) 
  return (props.loginState.isLoggedIn ? <MyProfileStack /> : <LoginStack />)

实际上，IMO，我更喜欢使用另一个 switchNavigator 在登录屏幕和我的内容屏幕之间切换，结帐this react navigation docs on authentication flow

【讨论】：

我试过了，但它说：'此导航器缺少导航道具。在 react-navigation 3 中你必须直接设置你的应用容器'

你有use createAppContainer on your root navigator吗？

我相信您正在尝试文档中的身份验证流程？您能否分享您拥有的整个导航器堆栈，以及您尝试从哪里调用 navigation 属性？

嘿，我刚刚浏览了你的代码。我有 1 条建议，您可以完全摆脱您的 IfLoggedIn.js，并在 MainTabNavigator 上包含您的登录名和个人资料堆栈。

要导航，您可以在login 屏幕的componentDidUpdate 上检查您的状态，然后在navigate to profile 上检查您的状态，或者（IMO 更好）dispatch an navigate action 在您检查的redux 操作中并确认登录成功。