React Navigation 6启用headerLargeTitle时标题padding适配问题

开启headerLargeTitle后标题内边距随屏幕尺寸自动变化，是native-stack底层依赖react-native-screens渲染原生大标题的默认行为，官方没有提供单独修改该内边距的专属配置，可通过以下两种方式解决：

• 方案1：样式覆盖（优先使用，改动最小）
  直接在页面options的headerLargeStyle字段中传入自定义内边距，强制覆盖默认的动态计算值即可，可同步搭配headerTitleStyle修改折叠态下的导航栏标题边距，保证两种状态样式统一：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const PortfolioStack = createNativeStackNavigator();

const PortfolioStackScreens = (): JSX.Element => {
  return (
    <PortfolioStack.Navigator>
      <PortfolioStack.Screen
        name="Portfolio"
        component={PortfolioScreen}
        options={{
          headerLargeTitle: true,
          headerShadowVisible: false,
          headerLargeTitleShadowVisible: false,
          // 新增以下配置覆盖大标题默认边距
          headerLargeStyle: {
            paddingHorizontal: 16, // 替换为业务需要的固定左右内边距
          },
          // 可选：同步配置折叠态标题边距
          headerTitleStyle: {
            paddingHorizontal: 16,
          }
        }}
      />
    </PortfolioStack.Navigator>
  );
};

若配置后样式不生效，先检查react-native-screens版本是否≥3.14.0，低版本对headerLargeStyle的自定义样式支持存在兼容问题。

问题效果参考：

• 方案2：自定义大标题组件（兼容特殊场景）
  部分iOS低版本上原生大标题的默认边距优先级高于自定义样式，此时可以直接给headerLargeTitle传入自定义渲染函数，完全替换默认的大标题组件，所有样式都可以自主控制，不会出现动态调整边距的问题：

options={{
  // 其余原有配置保持不变
  headerLargeTitle: () => (
    <Text
      style={{
        fontSize: 34,
        fontWeight: '700',
        paddingHorizontal: 16,
        // 可按需添加颜色、行高等任意样式规则
      }}
    >
      Portfolio
    </Text>
  )
}}

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