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

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;

我只想在 HomeScreen 上启用抽屉。
我正在考虑在主屏幕上创建抽屉导航器并将其与堆栈导航器结合使用，但我找不到方法，我什至不知道它是否会起作用。

有什么办法让它工作吗？？

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" }
);