响应导航v6堆栈导航器headerLargeTitle太快崩溃

Question

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

我的实现如下所示：

Navigator.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>

ScreenA返回：

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()返回的值似乎没有考虑到大的头。

这两个问题都应该通过将ScrollView上的属性ScrollView设置为"automatic"来解决。如下所示：

const headerHeight = useHeaderHeight();

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