React navigation: как предотвратить появление стека при отправке opendrawer извне drawernavigator?

Легкая закуска: https://snack.expo.io/Hkv4A8zjm

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

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

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

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

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

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

Вопрос

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

FWIW, я разместил это в репо, но ничего там не слышал. github.com/react-navigation/react-navigation/issues/5129

Jason Gaare 26.10.2018 04:44

Я, честно говоря, не получил здесь объяснения варианта использования (возможно, только потому, что я еще не использовал DrawerNavigation), но, AFAIK, весь смысл createDrawerNavigation состоит в том, чтобы включать только те экраны, которые вы хотите внутри DrawerNavigation, нет? Может быть, вы могли бы включить Page3 в createDrawerNavigation и визуализировать обычайDrawerComponent, где вы показываете только ссылки на Page1 и Page2?

Uzair A. 26.10.2018 05:41

@UzairA. это вариант, однако при его использовании страница 3 снова станет страницей верхнего уровня, в то время как я хотел бы переместить ее на страницу 2, а не переключаться на страницу 3. Я бы хотел сохранить обратное действие

Jason Gaare 26.10.2018 15:10

Ну, вы всегда можете написать собственное обратное действие. : D Если серьезно, это все, что я мог предложить, так как я не работал с DrawerNavigation. Надеюсь, вы получите ответ, который ищете!

Uzair A. 26.10.2018 16:46
0
4
877
2

Ответы 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);

На androidback 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
  }

Проблема здесь в том, что я хочу иметь возможность нажать «назад», чтобы перейти со страницы 3 на страницу 2, и это действие сброса устраняет возможность возврата.

Jason Gaare 26.10.2018 15:15

Нет, для этого дескриптора нажмите кнопку «Назад», используйте обычную навигацию для перехода на страницу 2.

Amal p 27.10.2018 16:46

В перекусе вы пытаетесь открыть ящик из 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
});

Хотя это работает для этого конкретного примера, я, вероятно, не лучше объяснил свой вариант использования. Проблема в том, что я не знаю, какой экран будет открывать страницу 3, поэтому мне нужно, чтобы она была доступна с каждой страницы в меню навигации, отсюда и то, как я изначально структурировал свою навигацию. Я бы предпочел, чтобы любой экран, НЕ видимый в ящике, НАЖАТЬ поверх любого экрана, к которому он переходит. Но также с этих нажатых экранов можно открыть ящик, сохраняя при этом текущий стек (он же не выскакивает). С вашим решением мне пришлось бы создать стек для каждого элемента ящика ...

Jason Gaare 26.10.2018 15:14

да, вероятно, лучше всего иметь стопку для каждого предмета из ящика. Возможно, вы сможете сохранить текущую структуру и использовать несколько сложных reset, но я бы предпочел стеки внутри ящика.

vonovak 26.10.2018 15:19

Другие вопросы по теме