从抽屉导航器中删除屏幕

时间:2018-06-28 17:04:19

标签: reactjs react-native react-navigation

我对React Navigation v2和抽屉导航有本地反应。实际上,我想在屏幕上显示抽屉式导航器(标题),但是我不想在抽屉中显示该页面。

有我的主抽屉,我也想在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'
  }
);

1 个答案:

答案 0 :(得分: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} />
    },
  },
)