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

Question

在我的应用程序中，我试图使用React导航的堆栈导航器与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>

screen的回报:

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时，它有一个问题，即折叠效果不"snap"，所以这里有些东西。

此外，headerHeight似乎没有返回大标题头的正确高度。我不确定这和这个有什么关系

Answer 1

此外，headerHeight似乎没有返回大标题头的正确高度。我不确定这和这个有什么关系

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

这两个问题应该通过在ScrollView上设置contentInsetAdjustmentBehavior属性到"automatic"来解决。这样的:

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