从抽屉导航器中移除屏幕答案

【问题标题】：Remove screen from drawerNavigator从抽屉导航器中移除屏幕
【发布时间】：2018-06-28 17:04:18
【问题描述】：

我对 react navigation v2 和 drawerNavigator 有反应原生问题。实际上，我希望抽屉导航器（标题）显示在屏幕上，但我不希望抽屉中的页面显示。

有我的主抽屉，我也想在 ActionPage 上显示它，但我不想在里面放 Action。

    const MainDrawer = DrawerNavigator(
  {
    Home: {
      screen: HomeStack,
      navigationOptions: {
        title: 'POČETNA',
      }
    },
    OrderP: {
      screen: OrderStack,
      navigationOptions: {
        title: 'NARUČI',
      }
    },
    CatalogP: {
      screen: CatalogStack,
      navigationOptions: {
        title: 'KATALOZI',
      }
    },
    InstructionP: {
      screen: InstructionStack,
      navigationOptions: {
        title: 'UPUTSTVO ZA PORUČIVANJE',
      }
    },
    InfoP: {
      screen: InfoStack,
      navigationOptions: {
        title: 'INFORMACIJE O APLIKACIJI'
      }
    },
    ActionP: {
      screen: ActionStack,
      navigationOptions: {
        header: null,
        title: ''
      }
    }
  }
);

还有根栈：

const RootStack = StackNavigator(
  {
    MainDrawer: {
      screen: MainDrawer,
    },
    Contact: {
      screen: ContactPage
    },
    ActionP: {
      screen: ActionPage
    },
    News: {
      screen: NewsPage
    }
  },
  {
    headerMode: 'none'
  }
);

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

为了隐藏你想要的页面，你可以修改这个代码：

// this const is used to hide desired pages
const hiddenDrawerItems = [
  'Home',
  'Profile',
]

const MainDrawer = createDrawerNavigator(
  {
    Home: { screen: HomePage },
    Profile: { screen: ProfilePage },
    // other pages
  },
  {
    // this entry is used to actually hide you pages
    contentComponent: (props) => {
      const clonedProps = {
        ...props,
        items: props.items.filter(item => !hiddenDrawerItems.includes(item.key)),
      }
      return <DrawerPage {...clonedProps} />
    },
  },
)

【讨论】：