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

Question

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

此导航器有 3 个选项卡：

• 2 个常规选项卡
• 1 StackNavigator 名为“搜索”

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

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

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

我怎样才能实现这一目标？

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

Answer 3

为我工作

const resetStackNavigator = (navigation, routeName) => {
          const resetAction = CommonActions.reset({
            index: 0, // Reset to the initial route (first screen)
            routes: [
              {
                name: routeName, 
              },
            ],
          });
        
          navigation.dispatch(resetAction);
        };
    
    
    
    import React from 'react';
    import { View, Text, Button } from 'react-native';
    
    const myScreen = ({ navigation }) => {
      return (
        <View>
          <Text>This is a stack screen </Text>
          <Button
            title="Reset StackNavigator"
           onPress={() => resetStackNavigator(navigation, '_ScreenNameToResetTo_')}
          />
        </View>
      );
    };
    
    export default myScreen;