ios - 用户登录后动态更改登录选项卡和我的个人资料选项卡

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

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

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

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