Как ограничить вкладки в соответствии с ролями пользователей? - PullRequest
Новая
       30

Как ограничить вкладки в соответствии с ролями пользователей?

0 голосов
/ 26 июня 2019

В основном из рисунка у нас есть Home, Listing, Calendar и Profile соответственно.

Нажмите сюда для картинки! Предполагая, что это приложение только для студентов и преподавателей,

если я хочу, чтобы роль учителя могла отображать 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
});

1 Ответ

1 голос
/ 26 июня 2019

Вы можете просто поставить базовое условие if, чтобы изменить TabNavigator следующим образом 

let bottomTabNavigator = null

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