退出抽屉内的子堆栈导航器时，如何使用 react-navigation 进入 initialRoute？

Posted 2023-04-13

【中文标题】退出抽屉内的子堆栈导航器时，如何使用 react-navigation 进入 initialRoute？

【英文标题】：How to go to initialRoute with react-navigation when exiting a child stack navigator inside a drawer?

【发布时间】：2019-11-25 14:02:33

【问题描述】：

我用 react-native、expo 和 react-navigation 构建了一个应用程序。我有一个主抽屉导航器，其中有 2 个其他堆栈导航器。一个堆栈导航器有 2 页； Products 和产品。当我点击Products 页面中的一个产品时，它会进入Product 页面。 Ben 如果我单击抽屉导航器中的另一个链接，我希望产品页面的堆栈导航器在离开堆栈导航器时返回到它的 initialRoute。

我尝试在退出堆栈导航器时设置 initialState，当我单击抽屉导航器中的导航器链接时，它会呈现 initialState，但是当我在子页面中并退出时它不起作用航海家。当我再次单击抽屉中的Products 时，它没有导航到Products 页面，而是停留在Product。

我可以在我的抽屉导航器中创建静态链接并使用this.props.navigation.navigate 始终转到this.props.navigation.navigate('Products')，但这将是我想要的最后一件事。我真的很喜欢我的抽屉导航器在我传递给它的内容时保持动态。

当componentWillUnmountlifecycle 继续时，我尝试this.props.navigation.navigate，但没有成功。

我该怎么做？

感谢您的帮助！

【问题讨论】：

也许您不想设置赏金，而是想向我们展示您的问题的清晰解释，包括图像和步骤，代码 sn-ps。 SO 上 99% 的问题都没有得到回答，因为它们写得不好

因为这是一个非常简单的问题，当您知道时，每个导航器都可以在所有方面完成。它不在我自己的代码中，而是一个普遍的问题。如果你没看错的话，我什至建议了一种方法，我不想遵循，这样做。

【参考方案1】：

是的，完全可以使用 react-navigation 重置堆栈，为此有一个 specific action。

这是一个抽屉位于标签导航中的示例。

首先我们在MenuDrawer.js中定义我们的抽屉，这里没什么特别的：

import  createDrawerNavigator  from 'react-navigation';

import ProductStack from './ProductStack';
import OtherStack from './OtherStack';

const MenuDrawer = createDrawerNavigator(
  Product: 
    screen: ProductStack,
    navigationOptions: 
      drawerLabel: 'My products',
    ,
  ,
  Other: 
    screen: OtherStack,
    navigationOptions: 
      drawerLabel: 'Something else',
    ,
  ,
);


export default MenuDrawer;

最后我们定义了我们的标签导航，我们使用tabBarOnPress 导航选项来监听任何抽屉打开并在需要时重置堆栈：

import  createBottomTabNavigator, StackActions, NavigationActions  from 'react-navigation';

import MenuDrawer from './MenuDrawer';

const BottomTabs = createBottomTabNavigator(
  Menu: 
    screen: MenuDrawer,
    navigationOptions: 
      title: 'Menu',
      tabBarOnPress: ( navigation ) => 
        const notResetRoute = navigation.state.routes.find(x => x.index > 0); // Check for stack not positioned at the first screen
        if (notResetRoute) 
          const resetAction = StackActions.reset( // We reset the stack (cf. documentation)
            index: 0,
            actions: [
              NavigationActions.navigate( routeName: notResetRoute.routes[0].routeName ),
            ],
          );
          navigation.dispatch(resetAction);
        
        navigation.openDrawer(); // Finally we open the drawer
      ,
    ,
  ,
);


export default BottomTabs;

当用户点击相应的选项卡时，抽屉就会打开。显然，如果抽屉以不同的方式打开，例如通过单击给定屏幕中的按钮，则可以进行相同的操作。重要的是同时重置堆栈。

【讨论】：

嗨，我能用 reactNavigation v5 调整它吗？我发布了这个***.com/questions/43090884/…

【参考方案2】：

import  NavigationActions  from 'react-navigation'

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

【讨论】：

解释有助于更好地理解。