React native 反应导航/堆栈：在干净构建后，标题未显示在子堆栈中

由于对我们的应用程序进行了干净的构建，子堆栈的标题不再显示。 我假设删除和重新创建warn.lock文件正确地更新了一些依赖项，因此我们不再停留在一些旧版本上。 我尝试了另一次将

react-navigation/native

和

react-navigation/stack

显式更新为最新版本（目前为5.7.3和5.9.0），但没有成功

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

我试图调整

堆栈.Navigator

标题模式

或

屏幕选项

和

堆栈.Screen

选项

，但找不到解决方案。因此，我们非常感谢您的帮助

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

// 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>
    );
};

//根导航
枚举根路由{
Login='Login'，
仪表板='仪表板'，
Sub='Sub'，
}
类型RootStackParamList={
[RootRoutes.Login]：未定义；
[RootRoutes.Dashboard]：未定义；
[RootRoutes.Sub]：未定义；
};
const RootStack=createStackNavigator（）；
常量RootStackNavigation=（）=>{
返回(
null，//需要在子屏幕上隐藏标题
}}
/>
);
};
//副导航
枚举子例程{
索引='子索引'，
}
类型SubStackParamList={
[子例程索引]：未定义；
};
const SubStack=createStackNavigator（）；
const SubStackNavigation=（）=>{
返回(
);
};
//App.tsx
导出常量应用=（）=>{
返回(
);
};

---

仅删除

标题：（）=>null

会有所不同，但这显示的是根标题，样式不正确，没有自定义内容（标题除外），并且仅在根堆栈中导航。

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

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

在其

堆栈.Screen

中，它需要

options={{
    headerShown: false,
}}