Сброс стека навигации для главного экрана (React Navigation and React Native)

У меня проблема с навигацией React Navigation и React Native. Речь идет о сбросе навигации и возврате на главный экран.

Я создаю StackNavigator внутри DrawerNavigator, и навигация между основным экраном и другими экранами работает. Но проблема в том, что стек навигации растет и растет. Я не уверен, как удалить экран из стека.

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

При повторном выборе кнопки «домой» сброс стека будет большим, но я не знаю, как это сделать. Здесь кто-то пытался помочь другому человеку с аналогичной проблемой, но решение не сработало для меня.

const Stack = StackNavigator({ Home: { screen: Home }, Entry: { screen: Entry }, Settings: { screen: Settings } }) export const Drawer = DrawerNavigator({ Home: { screen: Stack }}, { contentComponent: HamburgerMenu } ) 

И это простой пример экрана ящика

 export default class HamburgerMenu extends Component { render () { return   { this.props.navigation.navigate('Home')}}> {I18n.t('home')}   { this.props.navigation.navigate('Settings')}}> {I18n.t('settings')}   { this.props.navigation.navigate('Entry')}}> {I18n.t('entry')}   } } 

Я надеюсь, что вы можете мне помочь. Это неотъемлемая часть навигации, и решение будет замечательным!

Это как я это делаю:

 reset(){ return this.props .navigation .dispatch(NavigationActions.reset( { index: 0, actions: [ NavigationActions.navigate({ routeName: 'Menu'}) ] })); } 

по крайней мере, замените «Меню» на «Главная». Вы также можете адаптировать this.props.navigation к своей реализации.

Вот как я это делаю:

 import { NavigationActions } from 'react-navigation' this.props.navigation.dispatch(NavigationActions.reset({ index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })] })) 

Важная часть – key: null .

Это стирает стек при навигации от дочернего навигатора к родительскому навигатору.

Сделайте это, если вы получите эту ошибку:

введите описание изображения здесь

Для анимации я использую

 // https://github.com/oblador/react-native-animatable import * as Animatable from 'react-native-animatable' 

Я просто контролирую все анимации. Поместите их на любой компонент, который вы хотите, обернув его .

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

  let key; if (action.payload) { // find first key associated with the route const route = action.payload; const routeObj = state.routes.find( (r) => r.routeName === route ); if (routeObj) { key = { key: routeObj.key }; } } return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state ); 

Ответ – createSwitchNavigator , это те, которые не складывают вашу навигацию. Добавьте свой auth screen / navigator в createSwitchNavigator с помощью главного экрана / стека.

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

Для получения дополнительной информации о нем https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

В вашем StackNavigator и DrawerNavigator вы использовали Home как ключ, и я думаю, что он должен быть уникальным, и именно поэтому он создает проблему. Не могли бы вы попробовать заменить Home на Stack внутри вашего DrawerNavigator.

Надеюсь, это поможет 🙂

Для новейших версий реактивной навигации вы должны использовать StackActions для сброса стека, вот fragment кода:

 // import the following import { NavigationActions, StackActions } from 'react-navigation' // at some point in your code resetStack = () => { this.props .navigation .dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Home', params: { someParams: 'parameters goes here...' }, }), ], })) } 

Поп-действие возвращает вас к предыдущему экрану в стеке. Параметр n позволяет указать, сколько экранов будет отображаться.

n – число – количество экранов, которые нужно просмотреть.

import {StackActions} из «реакционной навигации»;

const popAction = StackActions.pop ({n: 1,});

this.props.navigation.dispatch (popAction);

Interesting Posts

.htaccess или .htpasswd эквивалент IIS?

Как войти в меню «Дополнительные параметры загрузки» в Windows 7 без загрузчика?

Почему операторы R if ifsese не возвращают векторы?

Каков правильный способ кодирования URL-символов Unicode?

Ошибка RE: незаконная последовательность байтов в Mac OS X

Ошибка Eclipse: R не может быть разрешено переменной

Обновление Windows 8.1 – бесконечный цикл перезагрузки: «Мы не смогли завершить обновления. Отмена изменений "

Удалить тень под панелью действий

Как изменить значения между двумя столбцами

Обнаружение типов параметров в семантическом действии Spirit

Сделать обратный прокси nginx 302 перенаправлять в подпапку URI вместо root

Как заставить Ubuntu 9.10 переустанавливать себя, не теряя мою информацию?

Как создать и показать общий диалог (ошибка, предупреждение, подтверждение) в JavaFX 2.0?

java регулярное выражение для извлечения содержимого в квадратных скобках

Скрипты оболочки Emacs – как перенести исходные параметры в скрипт?

Давайте будем гением компьютера.