使用React Navigation，如何强制抽屉导航器弹出到堆栈顶部？ [英] Using React Navigation, how can I force the drawer navigator to pop to the top of the stack?

问题描述

我正在使用React Navigation并且有一个抽屉导航器，其中包含多个Stack Navigators作为其项目。当我打开抽屉导航器并单击某个项目时，它会显示我单击的堆栈中的第一个屏幕。当我进入堆栈中的第二个屏幕然后打开抽屉并单击活动堆栈的相同抽屉链接时，我希望它显示堆栈的第一个屏幕，但它现在什么都不做。我怎么能做到这一点？

I'm using React Navigation and have a drawer navigator which contains several Stack Navigators as its items. When i open the drawer navigator and click on an item, it shows the first screen in the stack I clicked on. When I go to the second screen in the stack and then open the drawer and click on the same drawer link for the active stack, I want it to show the first screen of the stack, but instead it currently does nothing. How can I make that happen?

这是一个显示问题的小吃： https://snack.expo.io/@zeckdude/navigation-demo

Here's a snack which shows the issue: https://snack.expo.io/@zeckdude/navigation-demo

/**
 * Item Stack
 * Follows the Items Flow chart
 */
const ItemStack = createStackNavigator(
  {
    Items: { screen: ItemsScreen },
    Camera: { screen: CameraScreen },
    ViewItem: { screen: ViewItemScreen },
    AddEditItem: { screen: AddEditItemScreen },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false,
    },
  }
);


/**
 * Send Stack
 * Follows the Send Flow chart
 */
const SendStack = createStackNavigator(
  {
    Send: { screen: SendScreen },
    ScanQR: { screen: ScanQRScreen },
    SendConfirmation: { screen: SendConfirmationScreen },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false,
    },
  }
);


/**
 * Authorized Drawer
 * Used to set the labels in the drawer and enable drawer
 */
const AuthorizedDrawer = createDrawerNavigator(
  {
    ScanQR: { 
      screen: ScanQRScreen,
      navigationOptions: {
        drawerLabel: 'Scan'
      } 
    },
    ItemStack: { 
      screen: ItemStack,
      navigationOptions: {
        drawerLabel: 'Items'
      }
    },
    SendStack: { 
      screen: SendStack,
      navigationOptions: {
        drawerLabel: 'Send'
      } 
    },
  },
  {
    initialRouteName: 'ItemStack'
  }
);


/**
 * Authorized Drawer Stack
 * Put the drawer inside a stack so the header can be added and styled
 */
const AuthorizedDrawerStack = createStackNavigator(
  {
    AuthorizedDrawer: { screen: AuthorizedDrawer },
  }, 
  {
    headerMode: 'float',
    navigationOptions: ({navigation, screenProps, navigationOptions}) => {
      return {
        headerLeft: (
          <View 
            style={{
              paddingLeft: 10,
            }}
          >
            <Icon 
              name={navigation.state.isDrawerOpen ? 'close' : 'menu'}
              color="#2F6BAE"
              onPress={() => {
                navigation.toggleDrawer();
              }} 
            />
          </View>
        ),
        headerTitle: <Logo />
      };
    }
  }
)

推荐答案

在我的项目中，我完全自定义了contentComponent：

In my project I've fully customized the contentComponent:

const DrawerNavigator = createDrawerNavigator({
  screens, stacks etc...
}, {
    contentComponent: SideMenu,
    ...
})

SideMenu只是一个带导航按钮的简单组件。所以我在自定义组件中实现了每个onPress函数。他们只是导航到相关堆栈的初始屏幕，如下所示：

SideMenu is just a simple Component with navigation buttons. So I've implemented each onPress function in my custom component. And they are just navigating to the initial screen of the related stack like this:

onPress = () => {
 this.props.navigation.dispatch(DrawerActions.closeDrawer()); 
 this.props.navigation.navigate('TheInitialScreenInTheStack')
}

它适用于我的React Navigation 2.它对我的其他事情也非常有帮助，比如从抽屉登录或退出或者将redux因变量添加到标签。

It works for me with React Navigation 2. And it's been very helpful to me for other things too, like signing in and out from drawer or adding redux dependent variables to tabs.

这篇关于使用React Navigation，如何强制抽屉导航器弹出到堆栈顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！