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

Question

自从对我们的应用进行干净构建后，header 子堆栈不再显示。我假设 yarn.lock 文件的删除和重建正确地更新了一些依赖项，所以我们不再徘徊在一些旧版本上。我尝试将 react-navigation/native 和 react-navigation/stack 显式更新到最新版本（当前为 5.7.3 和 5.9.0），但无济于事。

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

我尝试调整 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 有所不同，但这显示了根 header，样式不正确且没有自定义内容（标题除外），并且还单独在根堆栈中导航。

Answer 1

好的，原来这是最新的react导航版本的一个小差异。而不是用

隐藏子堆栈的根 header

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

在其Stack.Screen中，需要与

options={{
    headerShown: false,
}}

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

react-navigation/stack: header not showing in sub stack after clean build

react-native

header

react-navigation-stack

stack-navigator