Question

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

此导航器有3个标签：

2个常规标签
1 StackNavigator命名为＆＃34;搜索＆＃34;

StackNavigator包含一个允许用户搜索项目的屏幕，以及一个用户可以看到搜索结果的第二个屏幕。

我不希望搜索结果页面成为DrawerNavigator的标签，这就是我实现此结构的原因。

问题是：如果用户已经执行了搜索，那么当他点击＆＃34;搜索＆＃34;选项卡，他不会回到搜索屏幕，而是返回搜索结果屏幕。我希望用户回到搜索屏幕。

我怎样才能做到这一点？

Answer 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)

Answer 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'
/>

如何重置嵌套在DrawerNavigatior中的StackNavigator的状态？

2 个答案: