Реагирующая навигация: как предотвратить выталкивание стека при отправке openDrawer извне BoxNavigator?

Question

Закуска : https://snack.expo.io/Hkv4A8zjm

Выполните следующие шаги для репликации:

1. Нажмите кнопку «Открыть ящик» на странице 1
2. Выберите страницу 2 в меню ящика
3. Нажмите «Перейти на страницу 3» на странице 2
4. Нажмите «Открыть ящик» на странице 3

Текущее поведение

В настоящее время, когда вы нажимаете «Открыть ящик» на странице 3, ящик открывается, как и ожидалось, , однако навигатор возвращает вас на страницу 2 , а не оставляет вас на странице 3, где вы открыли ящик. с.

Ожидаемое поведение

Возможно, это менее ожидаемый и более желательный, но я хотел бы иметь возможность открывать меню, не переходя обратно на страницу 2. Случай использования - когда у меня есть страницы, которые не являются верхним уровнем, поэтому они не включены в меню ящика. Тем не менее, я бы хотел, чтобы пользователь всегда имел доступ к ящику, если он хотел бы перейти в другое место - но если он закрывает меню, не выбирая другую страницу, он должен вернуть их туда, где они остановились, а не перемещать их назад. вверх по стеку.

Вопрос

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

Answer 1

Во время перекуса вы пытаетесь открыть ящик из screen3, которого нет в навигаторе ящиков и который вызывает проблемы.

Вам нужно будет переделать структуру навигацииприложение, например, так: (закуска: https://snack.expo.io/@vonovak/shallow-cake)

const Stack = createStackNavigator(
  {
    page2: { screen: Page2 },
    page3: { screen: Page3 },
  },
  {
    headerMode: 'none',
  }
);
const Navigator = createDrawerNavigator({
  page1: Page1,
  stack: Stack
});

Answer 2

Попробуйте сбросить stack при переходе от page 2 to page 3

Ниже я navigating до login page установите желаемую страницу просто измените значение

routeName: '//YOUR PAGE'

Используйте приведенный ниже код для навигации:

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
              {
                type: 'Navigation/INIT',
                routeName: 'Login',
                params: {
                }
              }
            ]
          });
this.props.navigation.dispatch(resetAction);

Вкл. android back button Выможно реализовать, как предложено ниже , если это настраиваемая панель инструментов или что-то еще, просто перейдите по событию onClick

import { BackHandler } from 'react-native';

constructor(props) {
    super(props);
    this.state = {

    };
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  handleBackButtonClick() {
     // NAVIGATE BACK TO PAGE 2
  }