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

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

1 个答案: