Сброс стека навигации для главного экрана (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 <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

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

22
javascript navigation react-native react-navigation

7 ответов

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

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

по крайней мере, замените 'Menu' на 'Home'. Вы также можете адаптировать эту.реквизит.навигация к вашей реализации.

36

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

import { NavigationActions } from 'react-navigation'

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

и key: null.

это стирает стек во время навигации С ребенком навигатор для родителей навигатор.

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

enter image description here

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

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

Я просто контролирую все анимации сам. Надень их любой компонент хотите, обернув его с <Animatable.View>.

15

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

  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 );
3

ответ createSwitchNavigator, это те, кто не стек навигации. Добавьте свой экран/навигатор auth в createSwitchNavigator с начальным экраном / стеком.

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

подробнее об этом https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

1

для новейших версий react-navigation вы должны использовать StackActions для сброса стека, вот фрагмент кода:

// 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...' },
       }),
     ],
   }))
}
1

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

надеюсь, это поможет:)

0

действие pop возвращает вас к предыдущему экрану в стеке. N param позволяет указать, сколько экранов, чтобы вернуться.

n-number-количество экранов, чтобы вернуться.

импорт { StackActions } из 'react-navigation';

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

этого.реквизит.навигация.dispatch (popAction);

0