Переключение между навигатором ящика и вкладками при изменении размера экрана сбрасывает навигатор обратно в начало

Question

Так что при изменении размера окна при использовании встроенного реагирования в веб-браузере. Я сталкиваюсь с проблемой, когда навигатор ящика и навигатор вкладок не синхронизированы c. Таким образом, когда я уменьшаю размер экрана до макета мобильного устройства, меня каждый раз отправляет обратно на домашний экран. Это способ синхронизировать два навигатора? c?

Заранее спасибо.

const webScreenOptions = undefined;

export default function MainNavigator(props: any) {
    const { width, height } = useDimensions().window;

    const { isLargeWeb } = isLargeScreenAndWeb(width); //Whether the screen is Large and of OS === 'web'

    const userState = useSelector((s: RootStateReducerListParam) => s.userSessionReducer)

    const { currentUser: user } = userState;

    //Switching navigators resets the route back to Home everytime
    if(isLargeWeb){
      return(<MainDrawer.Navigator
      openByDefault
      drawerType={'permanent'}
      initialRouteName='Home'
      drawerStyle={{ backgroundColor: PRIMARY_BLUE}}
      drawerContent={props => <DrawerContent {...props} />}
      drawerContentOptions={{ inactiveTintColor: '#fff', activeTintColor: SECONDARY_YELLOW }}
      overlayColor="transparent"
      >
           <MainDrawer.Screen
              name="Home"
              component={HomeNavigator}
              options={{
                title: 'Home',
                drawerIcon: ({ color }) => <DrawerBarIcon color={color} name="md-home" />,
              }}
            />
            <MainDrawer.Screen
              name="Trainers"
              component={TrainerNavigator}
              options={{
                title: 'Trainers',
                drawerIcon: ({ color }) => <DrawerBarIcon color={color} name="md-people" />,
              }}
            />
            { user?.roles.some(s => ['Admin', 'Data-Management'].includes(s)) &&
            <>
            <MainDrawer.Screen
              name="Classes"
              component={ClassNavigator}
              options={{
                title: 'Classes',
                drawerIcon: ({ color }) => <DrawerBarIcon type={'fontawesome5'} name={'chalkboard-teacher'} color={color} />,
              }}
            />

            <MainDrawer.Screen
              name="Reports"
              component={ReportNavigator}
              options={{
                title: 'Reports',
                drawerIcon: ({ color }) => <DrawerBarIcon color={color} name="md-document" />,
              }}
            />
            </>
            }

            <MainDrawer.Screen
              name="Admin"
              component={AdminNavigator}
              options={{
                title: (user?.roles.includes('Admin') ? 'Admin' : 'Settings'),
                drawerIcon: ({ color }) => <DrawerBarIcon color={color} name="md-settings" />,
              }}
            />
      </MainDrawer.Navigator>

      )
    }

    return (
      <BottomTab.Navigator
        initialRouteName="Home"      
        tabBarOptions={{ style: { backgroundColor: PRIMARY_BLUE }, inactiveTintColor: '#fff', activeTintColor: SECONDARY_YELLOW }}
        >
        <BottomTab.Screen
          name="Home"
          component={HomeNavigator}
          options={{
            title: 'Home',
            tabBarIcon: ({ color }) => <TabBarIcon name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}  color={color} />,
          }}
        />
        <BottomTab.Screen
          name="Trainers"
          component={TrainerNavigator}
          options={{
            tabBarIcon: ({ color }) => <TabBarIcon name={Platform.OS === 'ios' ? 'ios-people' : 'md-people'} color={color} />,
          }}
        />
        { user?.roles.some(s => ['Admin', 'Data-Management'].includes(s)) &&
            <>
         <BottomTab.Screen
          name="Classes"
          component={ClassNavigator}
          options={{
            title: 'Classes',
            tabBarIcon: ({ color }) => <TabBarIcon type={'fontawesome5'} name={'chalkboard-teacher'} color={color} />,
          }}
        />
        <BottomTab.Screen
          name="Reports"
          component={ReportNavigator}
          options={{
            tabBarIcon: ({ color }) => <TabBarIcon name={Platform.OS === 'ios' ? 'ios-document' : 'md-document'} color={color} />,
          }}
        />
            </>
            }
         <BottomTab.Screen
          name="Admin"
          component={AdminNavigator}
          options={{
            title: (user?.roles.includes('Admin') ? 'Admin' : 'Settings'),
            tabBarIcon: ({ color }) => <TabBarIcon name={Platform.OS === 'ios' ? 'ios-settings' : 'md-settings'} color={color}  />,
          }}
        />
      </BottomTab.Navigator>
    );
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: string; color: string, type?: string }) {
  switch(props.type){
    case "fontawesome5":
      return <FontAwesome5 size={22} style={{ marginBottom: -3 }} {...props} />;
    default:
      return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
  }
}

function DrawerBarIcon(props: { name: string; color: string, type?: string }) {
  switch(props.type){
    case "fontawesome5":
      return (
        <View style={{width: 35}}>
          <FontAwesome5 size={22} {...props} />
        </View>
      );
    default:
      return (
        <View style={{width: 35}}>
          <Ionicons size={30} {...props} />
        </View>
      );
  }
}

function DrawerContent(props:any) {
  const dispatch = useDispatch();
    
  const _handleLogOut = async() => {
    await clearUserSession();

    dispatch(logOutUserSession());
  }

  return(
    <View style={{flex: 1}}>
      <View style={{margin: 20}}>
      <Text style={{ fontSize: 18, color: SECONDARY_YELLOW}}>{'TONY MAZZOCCHI CENTER'}</Text>
      </View>
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
    <View         style={{marginBottom: 10, borderTopWidth: 1, borderTopColor: '#fff'}}>
    <DrawerItem 
        labelStyle={{color: '#fff'}}
        icon={({color, size}) => <TabBarIcon name={Platform.OS === 'ios' ? 'ios-exit' : 'md-exit'} color={'#fff'} /> }
        label="Log Out"
        onPress={_handleLogOut} />
    </View>
    </View>
  );
}

// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab


const HomeStack = createStackNavigator();

function HomeNavigator() {
  const { width, height } = useDimensions().window;
  const { isLargeWeb } = isLargeScreenAndWeb(width);
  const screenOptionsDynamic = isLargeWeb ? webScreenOptions : mobileScreenOptions;

  return (
    <HomeStack.Navigator
    screenOptions={screenOptionsDynamic}
    >
        <TrainerStack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{ 
          headerTitle: 'Home'
        }}
      />
    </HomeStack.Navigator>
  )
}


const TrainerStack = createStackNavigator();

function TrainerNavigator() {
  const { width, height } = useDimensions().window;
  const { isLargeWeb } = isLargeScreenAndWeb(width);
  const screenOptionsDynamic = isLargeWeb ? webScreenOptions : mobileScreenOptions;

  return (
    <TrainerStack.Navigator
    screenOptions={screenOptionsDynamic}
>
      <TrainerStack.Screen
        name="TrainerMenu"
        component={TrainerMenuScreen}
        options={{ headerTitle: 'Trainer Menu' }}
      />
      <TrainerStack.Screen
        name="TrainersScreen"
        component={TrainersScreen}
        options={{ headerTitle: 'Trainers' }}
      />
      <TrainerStack.Screen
        name="ATRScreen"
        component={ATRScreen}
        options={{ headerTitle: 'ATR Manager' }}
      />
            <TrainerStack.Screen
        name="MyATRsScreen"
        component={MyATRsScreen}
        options={{ headerTitle: 'View My ATRs' }}
      />
    </TrainerStack.Navigator>
  );
}

const ClassStack = createStackNavigator();

function ClassNavigator() {
  const { width, height } = useDimensions().window;
  const { isLargeWeb } = isLargeScreenAndWeb(width);
  const screenOptionsDynamic = isLargeWeb ? webScreenOptions : mobileScreenOptions;

  return (
    <ClassStack.Navigator
    screenOptions={screenOptionsDynamic}
>
      <ClassStack.Screen
        name="ClassesScreen"
        component={ClassScreen}
        options={{ headerTitle: 'Classes' }}
      />
    </ClassStack.Navigator>
  );
}

const ReportStack = createStackNavigator();

function ReportNavigator() {
  const { width, height } = useDimensions().window;
  const { isLargeWeb } = isLargeScreenAndWeb(width);
  const screenOptionsDynamic = isLargeWeb ? webScreenOptions : mobileScreenOptions;

  const userState = useSelector((s: RootStateReducerListParam) => s.userSessionReducer)

  const { currentUser: user } = userState;

  return (
    <ReportStack.Navigator
    screenOptions={screenOptionsDynamic}
>
      <ReportStack.Screen
        name="ReportMenu"
        component={ReportMenu}
        options={{ headerTitle: 'Report Menu' }}
      />
      {user?.roles.includes('Data-Management') &&
      <ReportStack.Screen
        name="AuthorizationsReportScreen"
        component={AuthorizationsReportScreen}
        options={{ headerTitle: 'Authorizations Report' }}
      />
      }
      <ReportStack.Screen
        name="ClassHoursScreen"
        component={ClassHoursScreen}
        options={{ headerTitle: 'Class Hours Report' }}
      />
      <ReportStack.Screen
        name="ClassInformationScreen"
        component={ClassInformationScreen}
        options={{ headerTitle: 'Class Information Report' }}
      />
      <ReportStack.Screen
        name="DistrictsReportScreen"
        component={DistrictsReportScreen}
        options={{ headerTitle: 'Districts Report' }}
      />
      <ReportStack.Screen
        name="GrantsReportScreen"
        component={GrantsReportScreen}
        options={{ headerTitle: 'Grants Report' }}
      />
      {user?.roles.includes('Data-Management') &&
      <ReportStack.Screen
        name="OtherReportsScreen"
        component={OtherReportsScreen}
        options={{ headerTitle: 'Other Reports' }}
      />
      }
      <ReportStack.Screen
        name="TrainerContactScreen"
        component={TrainerContactScreen}
        options={{ headerTitle: 'Trainer Contact' }}
      />
      <ReportStack.Screen
        name="TrainerReportScreen"
        component={TrainerReportScreen}
        options={{ headerTitle: 'Trainer Report' }}
      />
    </ReportStack.Navigator>
  );
}


const AdminStack = createStackNavigator();

function AdminNavigator() {
  const { width, height } = useDimensions().window;
  const { isLargeWeb } = isLargeScreenAndWeb(width);
  const screenOptionsDynamic = isLargeWeb ? webScreenOptions : mobileScreenOptions;

  const userState = useSelector((s: RootStateReducerListParam) => s.userSessionReducer)

  const { currentUser: user } = userState;

    return (
        <AdminStack.Navigator
        screenOptions={screenOptionsDynamic}
        >
            <AdminStack.Screen
              name="AdminMenu"
              component={AdminMenuScreen}
              options={{ headerTitle: (user?.roles.includes('Admin') ? 'Admin Menu' : 'Settings') }}
            />
            <AdminStack.Screen
              name="AccountScreen"
              component={AccountScreen}
              options={{ headerTitle: 'My Account' }}
            />
            {user?.roles.includes('Admin') &&
            <>
            <AdminStack.Screen
              name="AuthorizationScreen"
              component={AuthorizationScreen}
              options={{ headerTitle: 'Authoizations Manager' }}
            />

            <AdminStack.Screen
              name="ClassCodeScreen"
              component={ClassCodeScreen}
              options={{ headerTitle: 'Class Code Manager' }}
            />

            <AdminStack.Screen
              name="ClassNameScreen"
              component={ClassNameScreen}
              options={{ headerTitle: 'Class Name Manager' }}
            />

            <AdminStack.Screen
              name="DistrictScreen"
              component={DistrictScreen}
              options={{ headerTitle: 'District Manager' }}
            />

            <AdminStack.Screen
              name="DistrictDetailScreen"
              component={DistrictDetailScreen}
              options={{ headerTitle: 'District Manager' }}
            />

            <AdminStack.Screen
              name="EmailScreen"
              component={EmailScreen}
              options={{ headerTitle: 'Email Manager' }}
            />

            <AdminStack.Screen
              name="EmployerScreen"
              component={EmployerScreen}
              options={{ headerTitle: 'Employer Manager' }}
            />

            <AdminStack.Screen
              name="EvaluationApprovalScreen"
              component={EvaluationApprovalScreen}
              options={{ headerTitle: 'Evaluation Approval Manager' }}
            />

            <AdminStack.Screen
              name="GrantScreen"
              component={GrantScreen}
              options={{ headerTitle: 'Grant Manager' }}
            />

            <AdminStack.Screen
              name="LanguageDetailScreen"
              component={LanguageDetailScreen}
              options={{ headerTitle: 'Language Manager' }}
            />

            <AdminStack.Screen
              name="LanguageScreen"
              component={LanguageScreen}
              options={{ headerTitle: 'Language Manager' }}
            />

            <AdminStack.Screen
              name="SearchATRScreen"
              component={SearchATRScreen}
              options={{ headerTitle: 'Search ATRs' }}
            />

            <AdminStack.Screen
              name="TrackChangeScreen"
              component={TrackChangeScreen}
              options={{ headerTitle: 'Track Changes' }}
            />

            <AdminStack.Screen
              name="TrainerApprovalScreen"
              component={TrainerApprovalScreen}
              options={{ headerTitle: 'Trainer Approval' }}
            />

            <AdminStack.Screen
              name="UserScreen"
              component={UserScreen}
              options={{ headerTitle: 'User Manager' }}
            />
             <AdminStack.Screen
              name="UserDetailScreen"
              component={UserDetailScreen}
              options={{ headerTitle: 'User Manager' }}
            />
            </>
          }
      </AdminStack.Navigator>
    )
}