In my React Native app, there is a drawer navigator nested inside a stack navigator. I want to hide the stack navigator header inside all drawer navigator screens, but visible on other screens

try headerShown: false, not work

picpic2pic3

const StackNavigator = () => (
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Shop"
      component={DrawerNavigator}
      options={{
        header: ({ navigation }) => (
          <Header
            statusBarProps={{ translucent: false }}
            placement="center"
            leftComponent={{
              icon: "menu",
              color: "#fff",
              onPress: () => navigation.dispatch(DrawerActions.toggleDrawer()),
            }}
            centerComponent={{
              text: "Shopping",
              style: {
                fontSize: 24,
                color: "#fff",
              },
            }}
            containerStyle={{
              backgroundColor: "#F84930",
            }}
          />
        ),
      }}
    />
    <Stack.Screen
      name="Login"
      component={Login}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Register"
      component={Register}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="ProductDetail"
      component={ProductDetail}
      options={({ route }) => ({
        title: route.params.item.name,
        headerBackTitle: " return",
      })}
    />
  </Stack.Navigator>
);

CodePudding user response：

navigationOptions: { headerShown: false, }

Put this in your <Stack.Screen in your component

{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
}