React Navigation v6 堆栈导航器与 headerLargeTitle 崩溃太快

Question

在我的应用程序中，我尝试使用React Navigation 的堆栈导航器并headerLargeTitle启用headerTransparent。

我的实现如下所示：

导航器.tsx

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

屏幕A返回：

const headerHeight = useHeaderHeight();

return (
<>
  {isReady && (
    <ScrollView
      contentInset={{
        top: headerHeight * 2,
      }}
      style={{
        backgroundColor: 'red',
      }}
    >
      <View.Base
        style={{
          height: 900,
          width: '100%',
          backgroundColor: 'yellow',
        }}
      />
    </ScrollView>
  )}
</>
);

目前会产生以下输出：

视频示例

正如你所看到的，标题崩溃得太快了，遗憾的是我无法弄清楚为什么。

当设置headerTransparent为 false 时，它​​会出现折叠效果不“对齐”的问题，因此这里有些问题。

此外， headerHeight 似乎没有返回大标题标题的正确高度。不确定这是否与此有关。

Answer 1

此外， headerHeight 似乎没有返回大标题标题的正确高度。不确定这是否与此有关。

是的，返回的值useHeaderHeight()似乎没有考虑大标头。

您的两个问题都应该通过将属性设置contentInsetAdjustmentBehavior为ScrollViewto来解决"automatic"。像这样：

const headerHeight = useHeaderHeight();

return (
  <>
    {isReady && (
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={{
          backgroundColor: 'red',
        }}
      >
        <View.Base
          style={{
            height: 900,
            width: '100%',
            backgroundColor: 'yellow',
          }}
        />
      </ScrollView>
    )}
  </>  
);