Question

我用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')，但这将是我想要的最后一件事。我真的很希望我的抽屉导航器能够随着传递给我的东西保持动态。

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

我该怎么做？

谢谢您的帮助！

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

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

Answer 2

import { NavigationActions } from 'react-navigation'

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

退出抽屉中的子堆栈导航器时，如何通过react-navigation转到initialRoute？

2 个答案: