如何根据用户角色限制选项卡？

Question

基本上从图片上看，我们分别有Home、Listing、Calendar和Profile。

Click here for pic! 假设这是一个仅供学生和老师使用的应用程序，

如果我希望教师角色能够显示如图所示的 4 个选项卡，而对于学生，只有登录后才能显示主页、日历和个人资料...我该怎么做？

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
    />
  ),
};

const CalendarStack = createStackNavigator({
  Calendar: CalendarScreen,
});

CalendarStack.navigationOptions = {
  tabBarLabel: 'Calendar',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'}
    />
  ),
};

const ListingStack = createStackNavigator({
  Listing: ListingScreen,
});

ListingStack.navigationOptions = {
  tabBarLabel: 'Listing',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-paper' : 'md-paper'}
    />
  ),
};

const ProfileStack = createStackNavigator({
  Profile: ProfileScreen,
});

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-today' : 'md-today'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  ListingStack,
  CalendarStack,
  ProfileStack
});

Answer 1

您可以只输入一个基本的 if 条件来更改 TabNavigator，如下所示

let bottomTabNavigator = null

if (userRole === "admin") {
    bottomTabNavigator = createBottomTabNavigator({
       HomeStack,
       ListingStack,
       CalendarStack,
       ProfileStack
    });
} else {
    bottomTabNavigator = createBottomTabNavigator({
       HomeStack,
       CalendarStack,
       ProfileStack
    });
}
export default bottomTapNavigator

如何根据用户角色限制选项卡？

How to limit the tabs according to user roles?

tabs

roles

react-native