重置主屏幕的导航堆栈(React Navigation 和 React Native) [英] Resetting the navigation stack for the home screen (React Navigation and React Native)

问题描述

React Navigation 和 React Native 的导航有问题.这是关于重置导航并返回主屏幕.

I've got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen.

我已经在 DrawerNavigator 中构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航工作正常.但问题是，导航堆栈不断增长.我不确定如何从堆栈中删除屏幕.

I've build a StackNavigator inside of a DrawerNavigator, and the navigation between home screen and other screens is working. But the problem is, that the navigation stack grows and grows. I'm not sure how to remove a screen from the stack.

例如，当从主屏幕到设置屏幕，然后到入口屏幕，最后再到主屏幕时，主屏幕在堆栈中出现两次.使用后退按钮，我不会退出应用程序，而是再次进入输入屏幕.

For example when going from the home screen to the settings screen, then to the entry screen and lastly again to the home screen, the home screen is twice in the stack. With the back button I do not get out of the app, but again to the entry screen.

再次选择主页按钮时，重置堆栈会很棒，但我不知道该怎么做.此处 有人试图帮助遇到类似问题的其他人，但是解决方案对我不起作用.

When selecting the home button again a reset of the stack would be great, but I don't know how to do this. Here someone tried to help an other person with a similar problem, but the solution didn't work for me.

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

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

这是抽屉屏幕的一个简单示例

And this is a simple example of the drawer screen

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>
  }
}

我希望你能帮助我.这是导航的重要组成部分，一个解决方案会很棒！

I hope you can help me. This is an essential part of the navigation and a solution would be great!

推荐答案

This is How I do it :

This is How I do it :

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

至少将菜单"替换为主页".您可能还想根据您的实现调整 this.props.navigation.

at least replace 'Menu' with 'Home'. You may also want to adapt this.props.navigation to your implementation.

在版本 > 2 中遵循以下内容:

In version > 2 follow this:

import { NavigationActions, StackActions } from 'react-navigation';
        const resetAction = StackActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
            });

this.props.navigation.dispatch(resetAction); 

这篇关于重置主屏幕的导航堆栈(React Navigation 和 React Native)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！