react navigation/stack:干净构建后，子堆栈中未显示标头

Question

由于对我们的应用程序进行了干净的构建，子堆栈的头部不再显示。我认为yarn.lock文件的删除和重新创建正确地更新了一些依赖项，因此我们不再停留在一些旧版本上。我尝试了react-navigation/native和react-navigation/stack的另一个显式更新到最新版本(当前为5.7.3和5.9.0(，但没有成功。

我们的导航设置是一个根堆栈，下面有多个子堆栈。根堆栈是主要的应用程序导航，如登录和仪表板。子堆栈用于通过仪表板提供的功能块，每个块一个。子堆栈标头的样式和内容可能有所不同。

我试着调整Stack.NavigatorheaderMode或screenOptions和Stack.Screenoptions，但找不到解决方案。因此，我们非常感谢您的帮助。

显示问题的代码的简化版本是：

// Root navigation
enum RootRoutes {
Login = 'Login',
Dashboard = 'Dashboard',
Sub = 'Sub',
}
type RootStackParamList = {
[RootRoutes.Login]: undefined;
[RootRoutes.Dashboard]: undefined;
[RootRoutes.Sub]: undefined;
};
const RootStack = createStackNavigator<RootStackParamList>();
const RootStackNavigation = () => {
return (
<RootStack.Navigator
headerMode='screen'
initialRouteName={RootRoutes.Login}
screenOptions={{
headerStyle: {
elevation: 0,
},
}}
>
<RootStack.Screen
component={LoginScreen}
name={RootRoutes.Login}
/>
<RootStack.Screen
component={DashboardScreen}
name={RootRoutes.Dashboard}
options={{
title: 'Dashboard',
}}
/>
<RootStack.Screen
component={SubStackNavigation}
name={RootRoutes.Sub}
options={{
header: () => null, // needed to hide the header on sub screens
}}
/>
</RootStack.Navigator>
);
};

// Sub navigation
enum SubRoutes {
Index = 'SubIndex',
}
type SubStackParamList = {
[SubRoutes.Index]: undefined;
};
const SubStack = createStackNavigator<SubStackParamList>();
const SubStackNavigation = () => {
return (
<SubStack.Navigator
headerMode='screen'
initialRouteName={SubRoutes.Index}
screenOptions={{
headerTransparent: true,
}}
>
<SubStack.Screen
component={IndexScreen}
name={SubRoutes.Index}
options={{
title: 'Sub screen',
}}
/>
</SubStack.Navigator>
);
};

// App.tsx
export const App = () => {
return (
<NavigationContainer><RootStackNavigation/></NavigationContainer>
);
};

只有删除header: () => null才有所不同，但这显示的是根标头，样式不正确，而不是自定义内容(除了标题(，并且仅在根堆栈中导航。

Answer 1

好吧，这在最新的react导航版本中是一个小差异。而不是使用隐藏子堆栈的根标头

options={{
header: () => null,
}}

在Stack.Screen中，它需要使用

options={{
headerShown: false,
}}