How can I set the header height in React Navigation?-CodePudding

It seems like except backgroundColor nothing else has an effect in headerStyle.

 const defaultNavOptions = {
  headerBackTitle: 'Back',
  headerStyle: {
    backgroundColor: colors.secondary,
    height: 100,
  },

Then I'm passing the options:

 <Stack.Navigator
      initialRouteName={'Home'}
      screenOptions={({ navigation }) => ({
        ...defaultNavOptions,
        headerLeft: () => (
          <Icon
            name="menu-open"
            size={30}
            color={colors.primary}
            onPress={() => navigation.openDrawer()}
          />
        ),
      })}
    >

Am I doing something wrong?
Is there a way to set the height for the header?
Thanks in advance.

CodePudding user response：

<Stack.Navigator
      initialRouteName={'Home'}
      screenOptions={({ navigation }) => ({
        headerStyle: { backgroundColor: 'tomato', height: 100 },
        headerLeft: () => (
          <Icon
            name="menu-open"
            size={30}
            color={colors.primary}
            onPress={() => navigation.openDrawer()}
          />
        ),
      })}
    >

CodePudding user response：

I've found that using the options param on a per screen basis rather than for the whole navigator picks up the headerStyle etc

const defaultNavigationOptions = {
    headerBackTitle: 'Back',
    headerStyle: {
        backgroundColor: colors.secondary,
        height: 100,
    }
}
<Stack.Navigator initialRouteName={'Home'}>
    <Stack.Screen
        name="Home"
        component={Home}
        options={defaultNavigationOptions}
    />
    <Stack.Screen
        name="ScreenWithHeaderLeft"
        component={ScreenWithHeaderLeft}
        options={{
            ...defaultNavigationOptions,
            headerLeft: () => <Icon name="menu-open" size={30} color={colors.primary} />,
        }}
    />
</Stack.Navigator>