Question

我正在创建一个应用程序，登录后需要在其中显示“底部标签导航器”。

我知道，借助createBottomTabNavigator很容易。但是几乎没有什么转折：

我们有两种类型的用户。说“管理员”和“学生”。并且我们需要在“底部标签导航器”中为两种类型的用户显示不同的屏幕堆栈。两个用户的标签，标签图标等数量相同。只有屏幕堆栈不同。

所以我的问题是，什么是处理这种情况的好方法：

我应该使用createBottomTabNavigator创建两个Bottom Tab Navigator，然后在createSwitchNavigator中将两者都添加吗？
还是我将创建一个“组件”，并在其中检查是否用户类型为“ Admin”，然后返回“ First Bottom Tab Nav”，否则在render函数中返回“ Second”？

或者其他任何好的方法，请提出建议。

Answer 1

我现在正在使用这种方法（并且工作正常）：

我是否应该使用createBottomTabNavigator创建两个Bottom Tab Navigator，然后将两者都添加到createSwitchNavigator中？

这是路由堆栈：

管理堆栈导航器：

const AdminStack1 = createStackNavigator(
  {
    AdminScreen1,
  },
  {headerMode: 'none', initialRouteName: 'AdminScreen1'},
);

const AdminStack2 = createStackNavigator(
  {
    AdminScreen2,
  },
  {headerMode: 'none', initialRouteName: 'AdminScreen2'},
);

学生堆栈导航器：

    const StudentStack1 = createStackNavigator(
  {
    StudentScreen1,
  },
  {headerMode: 'none', initialRouteName: 'StudentScreen1'},
);

const StudentStack2 = createStackNavigator(
  {
    StudentScreen2,
  },
  {headerMode: 'none', initialRouteName: 'StudentScreen2'},
);

“管理”标签导航器：

const AdminTabNavigator = createBottomTabNavigator({
  Home: AdminStack1,
  Calendar: AdminStack2,
},
{
// tabBarOptions
});

“学生”标签导航器：

const StudentTabNavigator = createBottomTabNavigator({
  Home: StudentStack1,
  Calendar: StudentStack2,
},
{
// tabBarOptions
});

抽屉导航器：

const DrawerNavigator = createDrawerNavigator(
  {
    Admin: {
      screen: AdminTabNavigator,
    },
    Student: {
      screen: StudentTabNavigator,
    },
  },
  {
    contentComponent: Sidebar,
    drawerWidth: 310,
    drawerType: 'front',
  },
);

主开关导航器：

const AppNavigator = createSwitchNavigator(
  {
    Login,
    Main: DrawerNavigator,
  },
  {
    initialRouteName: 'Login',
  },
);

最后是App容器：

const AppContainer = createAppContainer(AppNavigator);

登录后，我得到了这张支票：

if (userType === 'Admin') {
    this.props.navigation.navigate('AdminScreen1');
} else {
    this.props.navigation.navigate('StudentScreen1');
}

因此，AdminScreen1启动时，它将自动启动“管理”选项卡导航器，因为此屏幕仅出现在“管理”选项卡导航器中。否则，它将启动“学生”选项卡导航器。

请提出建议，是否还有其他更好的方法。

使用两个不同的“底部标签”导航器

1 个答案: