Question

从图片上基本上，我们分别有主页，清单，日历和个人资料。

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

如何根据用户角色限制标签？

1 个答案: