如何仅在特定屏幕上启用抽屉？

Question

我正在使用 react-navigation 并尝试仅在主屏幕上使用抽屉式导航。

我的导航配置代码如下。

const WIDTH = Dimensions.get("window").width;

const DrawerConfig = {
  drawerWidth: WIDTH * 0.83,
  // drawerLockMode: "locked-open",
  contentComponent: ({ navigation }) => {
    return <SideDrawerScreen navigation={navigation} />;
  }
};

const AppNavigator = createStackNavigator(
  {
    Login: LoginScreen,
    Details: DetailsScreen,
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  { initialRouteName: "Login", headerMode: "none" }
);

const DrawerNavigator = createDrawerNavigator(
  {
    AppNavigator,
    Settings: {
      screen: SettingsScreen
    }
  },
  DrawerConfig
);

const AppContainer = createAppContainer(DrawerNavigator);

export default AppContainer;

我只想在主屏幕上启用抽屉。
我想在主屏幕上创建抽屉导航器并将其与堆栈导航器结合起来，但我找不到办法，我什至不知道它是否有效。

有什么办法可以让它生效吗？？

Answer 1

将您的主页与您想要使用抽屉的其他屏幕包裹起来，如下所示。

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  DrawerConfig
);

const AppNavigator = createStackNavigator(
  {
    Login: LoginScreen,
    Details: DetailsScreen,
    Home: {
      screen: DrawerNavigator,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  { initialRouteName: "Login", headerMode: "none" }
);