react-navigation / stack：干净构建后，标题未显示在子堆栈中

问题描述

由于我们的应用程序进行了干净的构建，因此不再显示子堆栈的标头。 我假设删除和重新创建yarn.lock文件已正确更新了某些依赖关系，所以我们不再停留在某些旧版本上。 我尝试了对react-navigation/native和react-navigation/stack的另一次显式更新，使其最新（当前是5.7.3和5.9.0），但无济于事。

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

我尝试调整Stack.Navigator headerMode或screenOptions和Stack.Screen options，但找不到解决方案。因此，感谢您的帮助。

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

// 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会有所不同，但这显示了根标头，具有不正确的样式和自定义内容（标题除外），并且仅在根堆栈中导航。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）