React Navigation 如何移除 Header 容器之间的间距？

结论

headerStyle 通常用于设置 Header 外层栏的样式，gap: 0 未必能控制内部左侧、标题和右侧容器之间的间距。可以分别检查这些容器的水平内边距和外边距，并将其清零：

<Stack.Screen
  options={{
    headerLeftContainerStyle: {
      paddingHorizontal: 0,
      marginHorizontal: 0,
    },
    headerTitleContainerStyle: {
      paddingHorizontal: 0,
      marginHorizontal: 0,
    },
    headerRightContainerStyle: {
      paddingHorizontal: 0,
      marginHorizontal: 0,
    },
  }}
/>

在 expo-router 中，可以将这些选项放在对应页面的 Stack.Screen 上。使用 navigator 层级的 screen options 时，也可以在那里设置。

为什么 headerStyle 中的 gap: 0 没有生效

headerStyle 用于设置 Header 外层视图的样式，左侧、标题和右侧容器则分别由 headerLeftContainerStyle、headerTitleContainerStyle 和 headerRightContainerStyle 控制。容器内部或布局实现本身可能带有间距，所以只设置 headerStyle: { gap: 0 } 不一定会改变它们之间的距离。

仍有空隙时

先确认空隙来自容器本身，还是左侧按钮、标题或右侧控件的宽度和对齐方式。可以暂时给三个容器设置不同的 backgroundColor，观察它们各自占据的区域，再逐项调整相应的 padding 或 margin。

如果空隙来自子组件自身，例如按钮的触摸区域或图标边距，就需要调整该子组件的样式。需要完全自定义三者的排列和间距时，可以使用自定义 Header 并自行控制布局。

可用的样式属性及具体布局行为会受 React Navigation navigator 和平台影响。如果这些容器选项没有改变布局，请确认当前使用的 navigator 是否支持它们，并检查对应版本的 Header 实现。

备注：内容仅供参考。