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

【问题标题】：Using React Navigation, how can I force the drawer navigator to pop to the top of the stack?使用 React Navigation，如何强制抽屉导航器弹出到堆栈顶部？
【发布时间】：2018-07-14 20:27:32
【问题描述】：

我正在使用 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 />
      };
    }
  }
)

【问题讨论】：

看起来你的零食已经这样做了？
是的，我在写完问题后补充说，但这对我来说似乎很老套，我更喜欢这样一个看似简单的操作不涉及所有代码的解决方案。

标签： javascript react-native react-navigation

【解决方案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 依赖变量添加到选项卡。

【讨论】：