重置主屏幕的导航堆栈（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!

推荐答案

这是我如何做的：

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

至少用'Home'替换'Menu'。
您可能还想将this.props.navigation改编为您的实现。

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

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