React Navigation v6 stack navigator headerLargeTitle折叠过快问题求助

问题根因 #

三个问题均为手动设置 ScrollView 的 contentInset 打乱原生大标题滚动交互逻辑导致，同时 useHeaderHeight 默认仅返回普通小标题模式的导航栏高度，不支持大标题模式的高度计算。

修复方案 #

1. 修正大标题高度计算

不要直接将 useHeaderHeight 返回值乘2估算高度，结合安全区钩子计算实际大标题总高度：

import { useHeaderHeight } from '@react-navigation/elements';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const headerHeight = useHeaderHeight();
const insets = useSafeAreaInsets();
// 大标题模式下总高度 = 普通标题高度*1.8 + 顶部安全区高度
const largeHeaderTotalHeight = headerHeight * 1.8 + insets.top;

2. 修复大标题折叠过快问题

移除手动设置的 contentInset，给 ScrollView 添加原生自动适配属性，让系统自动匹配大标题的折叠阈值：

<ScrollView
  // 原生自动适配导航栏、搜索栏的内容偏移
  contentInsetAdjustmentBehavior="automatic"
  // 匹配滚动条位置避免偏移
  scrollIndicatorInsets={{ top: largeHeaderTotalHeight }}
  style={{
    backgroundColor: 'red',
  }}
>
  <View.Base
    style={{
      height: 900,
      width: '100%',
      backgroundColor: 'yellow',
    }}
  />
</ScrollView>

3. 修复headerTransparent为false时的吸附异常

关闭 headerTransparent 时同步删除 headerBlurEffect 配置，同时开启搜索栏的 obscureBackground 属性避免透明度冲突：

<HomeStack.Navigator
  initialRouteName="ScreenA"
  screenOptions={({ navigation, route }) => ({
    title: 'My app',
    headerTransparent: false,
    headerLargeTitleShadowVisible: false,
    headerLargeTitle: true,
    headerSearchBarOptions: {
      autoCapitalize: 'none',
      obscureBackground: true,
    },
  })}
>
  <HomeStack.Screen
    name="ScreenA"
    component={ScreenA}
  />
</HomeStack.Navigator>

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