简体   繁体   中英

Combine navigation drawer and stack navigation in react native

Im trying to combine drawer navigation (AppHomeDrawerNavigator ) and stack navigation (AddDeleteStackNavigator) together. The problem is, when Im in the TodoList screen, I have 2 headers: one for drawer and another one for stack but I dont want to see the header of the drawer in this screen

Hoe can I do it?

const AddDeleteStackNavigator = createStackNavigator({
  AddTask: {
    screen: AddTask,
    navigationOptions: { header: () => true },
  },
  TodoList: {
    screen: TodoList,
    navigationOptions: ({ navigation }) => ({
      title: '',
      headerLeft: (<Icon name={'arrow-back-sharp'} onPress={() => { navigation.goBack() }} />),
    })
  },
});

const AppHomeDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "Menu",
    },
  },

  AddTask: {
    screen: AddDeleteStackNavigator,
    navigationOptions: {
      title: "Add Task",
    },
  },
});


const HomeStackContainer = createStackNavigator({
  AppHomeDrawerNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
       headerTitle: "",
      headerLeft: () => (
        <Icon
          style={{ paddingLeft: WIDTH / 40 }}
          onPress={() => navigation.openDrawer()}
          name="menu"
          size={WIDTH / 13.8}
        />
      )
    }
  }
}
);

This is why I have with this code: 在此处输入图像描述

I am also facing same problem, have you resolved it?

You can hide drawer / stack navigation bar by setting

screenOptions={{headerShown: false}}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM