React Native/Expo Router中Stack导航Header高度设置失效问题求助

方案1：通过内边距间接撑高Header #

虽然headerStyle的height属性不生效，但可以给标题、左右操作区添加垂直内边距，同步撑高整个Header：

const usageHeader = {
  headerStyle: { backgroundColor: '#fff' },
  // 给标题添加上下padding撑高整体
  headerTitleStyle: { 
    paddingVertical: 16,
    lineHeight: 24 // 避免标题因padding变形
  },
  headerLeft: () => (
    <View style={{ paddingVertical: 16 }}>
      <Text>返回</Text>
    </View>
  ),
  headerRight: () => (
    <View style={{ paddingVertical: 16 }}>
      <Text>更多</Text>
    </View>
  )
};

这种方式不用自定义完整Header，通过统一内边距保证Header整体高度一致，同时元素对齐。

方案2：自定义主题修改Header默认高度 #

Expo Router基于React Navigation，可通过主题变量全局或单页面修改Header高度：

全局修改 #

import { ThemeProvider } from '@react-navigation/native';
import { DefaultTheme } from '@react-navigation/native';

const customTheme = {
  ...DefaultTheme,
  components: {
    ...DefaultTheme.components,
    Header: {
      ...DefaultTheme.components.Header,
      styles: {
        ...DefaultTheme.components.Header.styles,
        container: { height: 80 }, // 修改默认高度
      },
    },
  },
};

// 在根布局中包裹ThemeProvider
export default function RootLayout() {
  return (
    <ThemeProvider value={customTheme}>
      <Stack>
        <Stack.Screen name="usage" options={usageHeader} />
      </Stack>
    </ThemeProvider>
  );
}

单页面单独修改 #

const usageHeader = {
  theme: {
    components: {
      Header: {
        styles: {
          container: { height: 80 },
        },
      },
    },
  },
  headerStyle: { backgroundColor: '#fff' },
  // 其他配置项...
};

方案3：设置容器高度同步撑开Header #

利用headerTitleContainerStyle、headerLeftContainerStyle、headerRightContainerStyle三个容器属性，统一设置高度并居中内部元素：

const usageHeader = {
  headerStyle: { backgroundColor: '#fff' },
  headerTitleContainerStyle: { 
    height: 80,
    justifyContent: 'center'
  },
  headerLeftContainerStyle: { height: 80, justifyContent: 'center' },
  headerRightContainerStyle: { height: 80, justifyContent: 'center' },
  headerLeft: () => <Text>返回</Text>,
  headerRight: () => <Text>更多</Text>,
};

这种方式直接控制Header内部容器高度，带动整体高度变化，同时保证元素垂直居中。

注意：不同版本的Expo Router/React Navigation对属性支持可能有差异，建议结合当前使用版本测试。

内容的提问来源于stack exchange，提问作者moo