Сброс стека навигации для главного экрана (React Navigation and React Native)
У меня проблема с навигацией React Navigation и React Native. Речь идет о сбросе навигации и возврате на главный экран.
Я создаю StackNavigator внутри DrawerNavigator, и навигация между основным экраном и другими экранами работает. Но проблема в том, что стек навигации растет и растет. Я не уверен, как удалить экран из стека.
Например, при переходе с главного экрана на экран настроек, затем на экран ввода и, наконец, снова на главный экран, главный экран дважды находится в стеке. С помощью кнопки «Назад» я не выхожу из приложения, но снова на экран ввода.
- Уведомление HTML5 не работает в Mobile Chrome
- Каков наилучший способ добавить опции для выбора из JS-объекта с помощью jQuery?
- Разница между \ w и \ b регулярными выражениями метасимволов
- Получить индекс элемента как дочернего по отношению к родительскому
- Изменение текста кнопки onclick
При повторном выборе кнопки «домой» сброс стека будет большим, но я не знаю, как это сделать. Здесь кто-то пытался помочь другому человеку с аналогичной проблемой, но решение не сработало для меня.
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')} } }
Я надеюсь, что вы можете мне помочь. Это неотъемлемая часть навигации, и решение будет замечательным!
- Расширение ошибки в Javascript с синтаксисом ES6 и Babel
- Как создать словарь и добавить пары ключ-значение динамически?
- Отключить стрелки страницы поиска Google, кроме результатов при прокрутке вверх / вниз с помощью клавиатуры
- Подождите 5 секунд перед выполнением следующей строки.
- Как читать локальный текстовый файл?
- В чем разница между «$ (this)» и «this»?
- Как изменить выбранный HTML-вариант с помощью JavaScript?
- Каков наилучший способ перезагрузить / обновить iframe?
Это как я это делаю:
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);