React Native嵌套createStackNavigator出现多视图异常问题求助

在React Native中使用createStackNavigator实现导航器嵌套时，出现了多导航栏同时显示的异常情况，期望界面仅保留一个导航栏（异常效果见下图）：

当前使用的代码：

import React from "react";
import { SettingsScreen } from "../../features/settings/screens/settings.screen";
import { FavouritesScreen } from "../../features/settings/screens/favourites.screen";

import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";

const SettingsStack = createStackNavigator();

export const SettingsNavigator = ({ route, navigation }) => {
  return (
    <SettingsStack.Navigator
      headerMode="screen"
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}
    >
      <SettingsStack.Screen
        options={{
          header: () => null,
        }}
        name="Settings"
        component={SettingsScreen}
      />

      <SettingsStack.Screen
        name="Favourites"
        component={FavouritesScreen}
      />
    </SettingsStack.Navigator>
  );
};

解决方法 #

这种问题本质是外层导航器已渲染导航栏，嵌套的子StackNavigator又默认渲染自身导航栏，导致重复显示。可通过两种方式处理：

1. 全局隐藏子导航器的导航栏 #

在子StackNavigator的screenOptions中全局关闭导航栏，若需特定页面显示，单独覆盖配置即可：

<SettingsStack.Navigator
  headerMode="screen"
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
    headerShown: false, // 全局隐藏子导航栏
  }}
>
  <SettingsStack.Screen
    options={{ header: () => null }}
    name="Settings"
    component={SettingsScreen}
  />

  <SettingsStack.Screen
    name="Favourites"
    component={FavouritesScreen}
    options={{ headerShown: true }} // 单独开启该页面导航栏
  />
</SettingsStack.Navigator>

2. 子导航器复用外层导航栏上下文 #

将子StackNavigator的headerMode设为none，关闭自身导航栏，然后在页面组件中通过navigation.setOptions配置外层导航栏内容：

// SettingsNavigator组件中
<SettingsStack.Navigator
  headerMode="none"
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}
>
  {/* 页面配置 */}
</SettingsStack.Navigator>

// 在SettingsScreen组件内
import { useEffect } from 'react';

const SettingsScreen = ({ navigation }) => {
  useEffect(() => {
    navigation.setOptions({
      title: '设置',
      // 可添加其他外层导航栏配置项
    });
  }, [navigation]);

  // 页面内容
  return (/* ... */);
};

内容的提问来源于stack exchange，提问作者בר חיימוביץ