React Native/Expo：设置页显示Profile头部，需修复导航头部异常

问题描述 #

用React Native和Expo开发应用时遇到导航头部异常：进入Settings标签页时，上方会显示Profile的头部，下方还会显示Settings的头部。预期效果是：Settings标签页仅显示自身头部，Profile标签页仅显示自身头部。

相关代码 #

设置页代码 #

const Settings = ({ handleLogout }) => (
  <SettingsStack.Navigator>
    <SettingsStack.Screen
      name="SettingsList"
      children={(props) => <SettingsList {...props} handleLogout={handleLogout} />}
      options={{ title: 'Settings', headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } }}
    />
    <SettingsStack.Screen
      name="SettingTab"
      component={SettingTab}
      options={({ route }) => ({ title: route.params.settingName, headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } })}
    />
  </SettingsStack.Navigator>
);

ProfileStack代码 #

<ProfileStack.Navigator>
      <ProfileStack.Screen
        name="Profile"
        options={({ route }) => ({
          headerShown: route.name === "Profile",
          headerTitle: '',
          headerRight: () => (
            <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
              <Item
                title="Settings"
                iconName="settings"
                onPress={() => navigation.navigate('Settings')}
              />
            </HeaderButtons>
          ),
        })}
      >
        {props => (
          <Profile
            {...props}
            userProfilePicture={userProfilePicture}
            onChangeProfilePicture={setUserProfilePicture}
          />
        )}
      </ProfileStack.Screen>
      <ProfileStack.Screen
        name="Settings"
        options={{ headerShown: false }}
      >
        {props => <Settings {...props} handleLogout={handleLogout} />}
      </ProfileStack.Screen>
    </ProfileStack.Navigator>

AppNavigator代码 #

const getheaderTitle = (route) => {
  const routeName = route.name;

  if (routeName === 'Home') {
    return 'Home';
  } else if (routeName === 'Profile') {
    return 'Profile';
  }

  return '';
};

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, handleLogout }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person';
          } else {
            return null;
          }

          return <MaterialIcons name={iconName} size={size} color={color} />;
        },

        headerTitle: getheaderTitle(route),

        tabBarActiveTintColor: 'rgb(255, 255, 255)',
        tabBarInactiveTintColor: 'rgb(114, 118, 122)',
        tabBarStyle: { backgroundColor: 'rgb(0, 0, 0)' },
      })}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)',
          },
          headerTintColor: 'white',
        }}
        initialParams={{ userProfilePicture }}
      />
      <Tab.Screen
        name="Profile"
        children={() => (
          <ProfileStackScreen
            userProfilePicture={userProfilePicture}
            setUserProfilePicture={setUserProfilePicture}
            handleLogout={handleLogout}
          />
        )}
        options={({ route }) => ({
          title: 'Profile',
          headerTitle: getheaderTitle(route),
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)',
          },
        })}
      />
    </Tab.Navigator>
  );
}

问题原因 #

问题出在嵌套导航的层级逻辑：

1. AppNavigator的Tab.Navigator中，Profile标签页本身配置了头部，当从Profile跳转到内部的Settings页面时，Tab层的头部不会自动隐藏，而Settings内部的Stack又显示了自己的头部，导致两个头部叠加。
2. ProfileStack里的Settings屏幕虽然设置了headerShown: false，但这只隐藏了Stack层的头部，Tab层的头部依然存在。

修复方案 #

1. 修改AppNavigator的头部控制逻辑 #

让Tab层的头部根据当前活跃的嵌套路由动态显示/隐藏，同时动态设置标题：

// 获取当前嵌套导航的活跃路由名称
const getCurrentRouteName = (route) => {
  const childRoute = route.state?.routes[route.state.index];
  return childRoute?.name || route.name;
};

const getheaderTitle = (route) => {
  const currentRouteName = getCurrentRouteName(route);

  if (currentRouteName === 'Home') {
    return 'Home';
  } else if (currentRouteName === 'Profile') {
    return 'Profile';
  } else if (currentRouteName === 'SettingsList') {
    return 'Settings';
  }

  return '';
};

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, handleLogout }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => {
        const currentRouteName = getCurrentRouteName(route);
        return {
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person';
            } else {
              return null;
            }

            return <MaterialIcons name={iconName} size={size} color={color} />;
          },
          // 动态控制Tab层头部显示：仅在Home或Profile路由时显示
          headerShown: currentRouteName === 'Home' || currentRouteName === 'Profile',
          headerTitle: getheaderTitle(route),
          tabBarActiveTintColor: 'rgb(255, 255, 255)',
          tabBarInactiveTintColor: 'rgb(114, 118, 122)',
          tabBarStyle: { backgroundColor: 'rgb(0, 0, 0)' },
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)',
          },
          headerTintColor: 'white',
        };
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        initialParams={{ userProfilePicture }}
      />
      <Tab.Screen
        name="Profile"
        children={() => (
          <ProfileStackScreen
            userProfilePicture={userProfilePicture}
            setUserProfilePicture={setUserProfilePicture}
            handleLogout={handleLogout}
          />
        )}
      />
    </Tab.Navigator>
  );
};

2. 调整ProfileStack的配置 #

确保Profile屏幕头部逻辑正确，同时让Settings屏幕正常显示自身头部：

<ProfileStack.Navigator>
  <ProfileStack.Screen
    name="Profile"
    options={({ navigation }) => ({
      headerShown: true,
      headerTitle: '',
      headerRight: () => (
        <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
          <Item
            title="Settings"
            iconName="settings"
            onPress={() => navigation.navigate('Settings')}
          />
        </HeaderButtons>
      ),
      headerStyle: { backgroundColor: 'black' },
      headerTintColor: 'white',
    })}
  >
    {props => (
      <Profile
        {...props}
        userProfilePicture={userProfilePicture}
        onChangeProfilePicture={setUserProfilePicture}
      />
    )}
  </ProfileStack.Screen>
  <ProfileStack.Screen
    name="Settings"
    // Tab层头部已隐藏，这里显示自身头部
    options={{ headerShown: true }}
  >
    {props => <Settings {...props} handleLogout={handleLogout} />}
  </ProfileStack.Screen>
</ProfileStack.Navigator>

修复效果 #

• 进入Profile标签页时，仅显示带Settings按钮的Profile头部
• 进入Settings页面时，Tab层头部隐藏，仅显示Settings内部的头部
• 回到Home标签页时，显示Home的头部

内容的提问来源于stack exchange，提问作者Jonas Gandrup