如何重置嵌套在抽屉导航器中的堆栈导航器的状态？答案

【问题标题】：How to reset the state of a StackNavigator nested in a DrawerNavigatior?如何重置嵌套在抽屉导航器中的堆栈导航器的状态？
【发布时间】：2017-06-20 13:30:19
【问题描述】：

我正在构建一个应用，其导航基于 react-navigation 库中的 DrawerNavigator。

此导航器有 3 个选项卡：

2 个常规标签
1 个名为“搜索”的 StackNavigator

StackNavigator 由一个允许用户搜索项目的屏幕和另一个用户查看搜索结果的屏幕组成。

我不希望搜索结果页面成为 DrawerNavigator 的选项卡，这就是我实现这种结构的原因。

问题是：如果用户已经进行了搜索，当他点击“搜索”选项卡时，他并没有回到搜索屏幕，而是回到了搜索结果屏幕。我希望用户回到搜索屏幕。

我怎样才能做到这一点？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您可以使用带有 navigationActions 的导航调度来实现这一点

import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({
      routeName: 'DrawerScreen',
      params: {},
      action: NavigationActions.navigate({ routeName: 'SearchScreen' }),
    }),
  ],
})
navigation.dispatch(resetAction)

【讨论】：

为此，我需要在 DrawerNavigator 的 Search 选项卡上捕获 click 事件。你知道我怎样才能赶上这个活动吗？
请查看此链接stackoverflow.com/questions/44801667/…

【解决方案2】：

import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
      NavigationActions.navigate({ routeName: 'SearchScreen'})
  ]
})

在您的按钮或任何带有事件的元素中添加以下内容： this.props.navigation.dispatch(resetAction)

<Button
    onPress= {
        () => this.props.navigation.dispatch(resetAction)
    }
    title='Back to Search'
/>

【讨论】：

为什么会这样？几天来我一直在努力实现一件简单的事情。