Question

我正在使用反应导航，并试图仅在主屏幕上使用抽屉式导航。

我的导航配置代码如下。

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

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

1 个答案: