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

【问题标题】：How can I enable drawer only on certain screen?如何仅在特定屏幕上启用抽屉？
【发布时间】：2019-12-21 02:08:20
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案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" }
);

【讨论】：