用户登录后，使用“我的配置文件”选项卡动态更改“登录选项卡”

Question

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

我使用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是一个组件而不是常规函数。

Answer 1

为什么不直接在你的LoginStack上退回你的MyProfileStack或IfLoggedIn？

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

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