React Navigation 如何在iOS端启用iOS应用常用的小型导航头

iOS端导航头偏大是因为React Navigation默认开启了iOS原生大标题特性，关闭该特性即可切换为iOS标准小型导航头，具体配置方式如下：

全局统一配置所有页面为小型导航头 #

在Stack.Navigator的screenOptions参数中添加配置，全局关闭大标题特性：

import { createStackNavigator } from '@react-navigation/stack';
import { Platform } from 'react-native';

const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 仅iOS端关闭大标题，不影响安卓端原有逻辑
        headerLargeTitle: Platform.OS === 'ios' ? false : undefined,
        // 可选：固定iOS端导航头为标准小型高度
        headerStyle: Platform.OS === 'ios' ? { height: 44 } : undefined,
      }}
    >
      {/* 你的页面路由配置 */}
    </Stack.Navigator>
  )
}

单独配置指定页面为小型导航头 #

如果仅弹出卡片页面需要使用小型导航头，在对应Stack.Screen的options中单独配置即可：

<Stack.Screen 
  name="TargetModalPage" 
  component={YourModalPageComponent}
  options={{
    headerLargeTitle: Platform.OS === 'ios' ? false : undefined,
    presentation: 'card', // 你用到的卡片弹出形式
    headerShown: true,
  }}
/>

异常兼容处理 #

如果关闭大标题后仍存在高度异常，可检查以下配置项：

• 禁用headerTransparent属性，避免透明导航头导致的高度计算偏移
• 若使用自定义header组件，需手动给iOS端设置高度为44pt，避免自定义组件适配错误
• 确保React Navigation版本为6.0及以上稳定版，旧版本不支持headerLargeTitle属性

故障效果参考：

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