Блог

После выполнения чистой сборки нашего приложения заголовки вложенных стеков больше не отображаются. Я предполагаю удаление и воссоздание пряжи.файл блокировки правильно обновил некоторые зависимости, поэтому мы больше не задерживаемся на некоторых старых версиях. Я попробовал другое явное обновление 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 имело значение, но это показывает корневой заголовок с неправильным стилем, а не пользовательский контент (кроме заголовка), а также навигацию только в корневом стеке.

Хорошо, это оказалось небольшим отличием в последней версии react navigation. Вместо того, чтобы скрывать корневой заголовок для вложенного стека с

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

в его Stack.Screen , он должен быть с

 options={{
    headerShown: false,
}}