Javascript 重置主屏幕的导航堆栈（React Navigation 和 React Native）

Resetting the navigation stack for the home screen (React Navigation and React Native)

提问by Daniel

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

我在React Navigation和 React Native的导航方面遇到了问题。它是关于重置导航并返回主屏幕。

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.

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

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. Heresomeone 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!

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

回答by Robin Dehu

This is How I do it :

这是我的做法：

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

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

至少将“菜单”替换为“主页”。您可能还希望根据您的实现调整 this.props.navigation。

In version > 2 follow this:

在版本 > 2 中，请遵循以下步骤：

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

this.props.navigation.dispatch(resetAction); 

回答by agm1984

Here is how I do it:

这是我如何做到的：

import { NavigationActions } from 'react-navigation'

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

The important part is key: null.

重要的部分是key: null。

That wipes the stack while navigating from a childnavigator to a parentnavigator.

这会在从子导航器导航到父导航器时擦除堆栈。

Do that if you get this error:

如果出现此错误，请执行以下操作：

For animations, I use

对于动画，我使用

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

I just control all the animations myself. Put them on anycomponent you want by wrapping it with <Animatable.View>.

我只是自己控制所有的动画。把它们放在任何你想用它包装组件<Animatable.View>。

回答by Gustavo Garcia

For newest versions of react-navigation you should use StackActions for reset the stack, here's a piece of code:

对于最新版本的 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...' },
       }),
     ],
   }))
}

回答by Bashirpour

React Navigation 5.x

反应导航 5.x

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Available in Snack

有零食

回答by peterorum

To use Back, you need to find the unique key associated with the path. Inside your navigation reducer, you can search the existing state to find the first route on the stack using that path, grab its key & pass that to Back. Back will then navigate to the screen prior to the path you gave.

要使用 Back，您需要找到与路径关联的唯一键。在您的导航减速器中，您可以搜索现有状态以使用该路径查找堆栈中的第一条路线，获取其密钥并将其传递给 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 );

回答by Kosalram Rama Krishnan

The pop action takes you back to a previous screen in the stack. The n param allows you to specify how many screens to pop back by.

弹出操作将您带回到堆栈中的前一个屏幕。n 参数允许您指定弹出的屏幕数量。

n - number - The number of screens to pop back by.

n - number - 弹回的屏幕数量。

import { StackActions } from 'react-navigation';

从“反应导航”导入 { StackActions };

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

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

this.props.navigation.dispatch(popAction);

this.props.navigation.dispatch(popAction);

回答by anshul garg

Just mix the two solutions given above and this will work just fine, basically we have to use StackActions and key: null. Without using StackActions, it was throwing some error

只需混合上面给出的两个解决方案，这将工作得很好，基本上我们必须使用 StackActions 和 key: null。不使用 StackActions，它抛出了一些错误

import { NavigationActions, StackActions } from 'react-navigation';
const resetHandler = () => {
        props.navigation.dispatch(StackActions.reset({
            index: 0,
            key: null,
            actions: [NavigationActions.navigate({ routeName: 'PatientDetails' })]
        }))
    };

回答by Nelson Bass

The Answer is createSwitchNavigator, it those not stack up your navigation. Add your auth screen/navigator in a createSwitchNavigator with the home screen/stack.

答案是createSwitchNavigator，它不会叠加您的导航。将您的身份验证屏幕/导航器添加到带有主屏幕/堆栈的 createSwitchNavigator 中。

With that, when you navigate from home to log in, the stacks are not kept.

这样，当您从家中导航以登录时，不会保留堆栈。

For more on it https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

有关更多信息 https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

回答by timhysniu

NavigationActions.reset()seems to be the preferable solution. One issue I ran into with it actions was the tab buttons. Tabs would still show even if I explicitly turned them off in component. If I used navigation.navigate() instead of doing this via reset()it would work fine.

NavigationActions.reset()似乎是更好的解决方案。我在操作中遇到的一个问题是选项卡按钮。即使我在组件中明确关闭了选项卡，它们仍会显示。如果我使用 navigation.navigate() 而不是通过reset()它来做这件事会很好。

SomeComponentScreen.navigationOptions = {
  header: null
};

A workaround for this annoyance that worked for me is to consecutively call multiple navigatestatements.

这种对我有用的烦恼的解决方法是连续调用多个navigate语句。

      navigation.goBack();   // this would pop current item in stack
      navigation.navigate({
        routeName: 'SomeOtherComponent'
      });

回答by Gvs Akhil

This works fine as of now:

到目前为止，这工作正常：

import { NavigationActions, StackActions } from 'react-navigation'

resetStack = () => {
        const navigateAction = NavigationActions.navigate({
            routeName: 'Home',

            params: {},

            action: NavigationActions.navigate({ routeName: 'Home' }),
        });

        props.navigation.dispatch(navigateAction);
    }

Found here in the docs: https://reactnavigation.org/docs/en/navigation-actions.html#reset

在文档中找到：https: //reactnavigation.org/docs/en/navigation-actions.html#reset