Боковая панель React Native Navigation и переключаемая панель вкладок

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

Если есть способ иметь навигатор Drawer и TabBar с одними и теми же экранами одновременно, это также решит мою проблему.

  <Stack.Navigator
      screenOptions={{ headerShown: false }}
      mode="modal"
      initialRouteName="WalkthroughScreen"
    >
      {deviceSize(layout.width) > 0 ||
      (layout.width < 50 && Platform.OS === 'web') ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}

react-navigation react-native-navigation react-navigation-v5
person Kheva Mann    schedule 19.08.2020    source источник
comment
Вы нашли что-нибудь, что соответствовало вашим потребностям? Ищу нечто подобное. В зависимости от того, находимся ли мы в режиме рабочего стола, покажите навигатор ящиков, если в мобильном режиме, покажите нижний навигатор вкладок.   -  person Esteban Chornet    schedule 28.04.2021
comment
@EstebanChornet, посмотрите ответ, который я только что опубликовал, и дайте мне знать, если вам понадобится дополнительная информация.   -  person Kheva Mann    schedule 29.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я просто использовал нижнюю навигацию для мобильного приложения и навигацию по ящикам для Интернета и мобильного Интернета. Итак, мой код выглядит так:

      {Platform.OS === 'web' ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}

Причина, по которой это работает, а не наоборот, заключается в том, что он просто использует платформу, поэтому у навигатора никогда нет причины переключать средний процесс. Поэтому я решил отказаться от вкладок и использовать гамбургер-меню для мобильного Интернета с боковым ящиком и постоянным боковым ящиком на больших экранах.

Итак, в моем навигаторе ящика <DrawerNavigation.Navigator> я установил drawerType вот так

      drawerType={deviceSize(layout.screenWidth) === 0 ? 'front' : 'permanent'}
person Kheva Mann    schedule 29.04.2021
comment
Спасибо за ответ! К вашему сведению, я наконец решил использовать useWindowDimensions() из react-native, и если width >= 960px, то показать навигатор ящика, в противном случае - нижнюю вкладку. На iPad в портретном режиме будут вкладки, в альбомном - ящик. - person Esteban Chornet; 30.04.2021
comment
@EstebanChornet проблема в том, что если кто-то изменит размер своего браузера, навигация будет сброшена, и они потеряют свое место - person Kheva Mann; 30.04.2021