退出抽屉内的子堆栈导航器时如何使用反应导航转到 initialRoute？

Question

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

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

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

当 componentWillUnmount 生命周期继续时，我尝试 this.props.navigation.navigate，但没有成功。

我该怎么做？

感谢您的帮助！

Answer 1

是的，完全可以通过反应导航重置堆栈，为此有一个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;

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

Answer 2

import { NavigationActions } from 'react-navigation'

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

退出抽屉内的子堆栈导航器时如何使用反应导航转到 initialRoute？

How to go to initialRoute with react-navigation when exiting a child stack navigator inside a drawer?

javascript

react-native

react-navigation

react-navigation-drawer

react-navigation-stack