使用 React Navigation，如何强制抽屉导航器弹出到堆栈顶部？

Question

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

这是显示问题的小吃： 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 />
      };
    }
  }
)

Answer 1

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

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

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

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

它适用于我的 React Navigation 2。它对我的其他事情也非常有帮助，例如从抽屉中登录和退出或向选项卡添加 redux 依赖变量。