退出抽屉中的子堆栈导航器时，如何通过react-navigation转到initialRoute? [英] How to go to initialRoute with react-navigation when exiting a child stack navigator inside a drawer?

问题描述

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

I build an app with react-native, expo and react-navigation. I have a main drawer navigator who has in it 2 other stack navigator. One stack navigator have 2 pages; Products and Product. When I click on one product in the Products page, it goes into the Product page. Ben if I click on another link in my drawer navigator, I would like that the Products page's stack navigator would return to it's initialRoute when leaving the stack navigator.

我尝试设置退出堆栈导航器时的initialState，当我单击抽屉式导航器中的导航器链接时，它会渲染initialState，但是当我进入子页面并退出时，它不起作用航海家.当我再次单击抽屉中的Products时，它停留在Product上，而不是导航到Products页.

I tried to set the initialState for when I exit the stack navigator, it render the initialState when I click on the navigator link in my drawer navigator, but it doesn't work when I'm in the child page and exit the navigator. When I click again on Products in my drawer, instead of navigate to the Products page, it stayed on Product.

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

I can create statics links in my drawer navigator and use this.props.navigation.navigate to always go to this.props.navigation.navigate('Products'), but it will be the last thing I want. I would really love that my drawer navigator stays dynamic with what I pass to it.

当componentWillUnmount生命周期继续进行时，我尝试了this.props.navigation.navigate，但是没有用.

I tried to this.props.navigation.navigate when the componentWillUnmountlifecycle goes on, but it didn't work.

我该怎么做?

谢谢您的帮助！

推荐答案

是的，完全可以通过react-navigation重置堆栈，其中有一个

Yes it is entirely possible to reset the stack with react-navigation, there is a specific action for this.

这是一个抽屉位于选项卡导航中的示例.

Here is an example when the drawer is in a tab navigation.

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

First we define our drawer in MenuDrawer.js, nothing special here:

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导航选项来侦听任何抽屉打开情况，并在需要时重置堆栈:

Finally we define our tab navigation, and we use the tabBarOnPress navigation option to listen to any drawer opening and reset the stack if needed:

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;

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

Here the drawer is opened when the user clicks on the corresponding tab. Obviously the same could be made if the drawer is opened differently, for instance through a click on a button in a given screen. The important thing is to reset the stacks at the same time.

这篇关于退出抽屉中的子堆栈导航器时，如何通过react-navigation转到initialRoute?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！