react-native - React Navigation 5 的标题问题

Question

我有几件事是 React Navigation 无法完成的

• 选项卡的标题标题显示不正确(现在所有 3 个选项卡都显示相同的标题，即“帐户”)
• 隐藏某些屏幕的标题(例如:- 对于帐户屏幕，我不需要任何标题)

我有嵌套导航器设置，代码如下:-

ProjectNavigator.tsx

    const BottomTabNavigator = createBottomTabNavigator();
    
    export const BottomNavigator = () => {
      return (
        <BottomTabNavigator.Navigator>
          <BottomTabNavigator.Screen
            name="Explore"
            component={HomeScreen}
            options={{ title: "Home" }}
          />
          <BottomTabNavigator.Screen
            name="MySpaces"
            component={MySpacesScreen}
            options={{ title: "My Spaces" }}
          />
          <BottomTabNavigator.Screen
            name="Account"
            component={AccountScreen}
            options={{ title: "Account" }}
          />
        </BottomTabNavigator.Navigator>
      );
    };

    function getHeaderTitle(route: any) {
      // If the focused route is not found, we need to assume it's the initial screen
      // This can happen during if there hasn't been any navigation inside the screen
      // In our case, it's "Feed" as that's the first screen inside the navigator
      const routeName = getFocusedRouteNameFromRoute(route) ?? "XYZ";
      console.log("routeName", routeName);
      switch (routeName) {
        case "Home":
          return "Home";
        case "MySpaces":
          return "My Spaces";
        case "Account":
          return "My account";
      }
    }
    
    const AccountStackNavigator = createStackNavigator();

export const AccountNavigator = () => {
  return (
    <AccountStackNavigator.Navigator>
      <AccountStackNavigator.Screen
        name="Account"
        component={AccountScreen}
        options={{ title: "My Account" }}
      />
      <AccountStackNavigator.Screen
        name="MyProfile"
        component={MyProfileScreen}
        options={{ title: "My Profile" }}
      />
      <AccountStackNavigator.Screen
        name="RecentSearches"
        component={RecentSearchesScreen}
        options={{ title: "Recent Searches" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinHistory"
        component={CheckinHistoryScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinMonthlyList"
        component={CheckinMonthlyListScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseHistory"
        component={PurchaseHistoryScreen}
        options={{ title: "Purchase History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseDetails"
        component={PurchaseDetailsScreen}
        options={{ title: "Purchase Details" }}
      />
      <AccountStackNavigator.Screen
        name="Support"
        component={SupportScreen}
        options={{ title: "Support" }}
      />
      <AccountStackNavigator.Screen
        name="Faq"
        component={FaqScreen}
        options={{ title: "FAQ" }}
      />
      <AccountStackNavigator.Screen
        name="CouponCodes"
        component={CouponCodesScreen}
        options={{ title: "Coupon Codes" }}
      />
    </AccountStackNavigator.Navigator>
  );
};
    
    const FinalStackNavigator = createStackNavigator();

export const FinalNavigator = () => {
  const authContext = useContext(AuthContext);
  return (
    <FinalStackNavigator.Navigator>
      {authContext.isLoggedIn ? (
        <FinalStackNavigator.Screen
          name="Account"
          component={BottomNavigator}
        />
      ) : (
        <FinalStackNavigator.Screen name="Auth" component={AuthNavigator} />
      )}
    </FinalStackNavigator.Navigator>
  );
};

AppNavigator.tsx

    export const AppNavigator = (props: any) => {
      return (
        <NavigationContainer>
          <FinalNavigator />
        </NavigationContainer>
      );
    };

如果您需要任何其他代码，请告诉我

我们将不胜感激。

Answer 1

感谢 Atul 提供提示，我使用了 headerMode 和 headerShown 的组合，如果有人遇到此问题，这是我的导航代码

// ----------- Auth Stack Navigator ----------------
const AuthStackNavigator = createStackNavigator();
const AuthNavigator = () => {
  return (
    <AuthStackNavigator.Navigator headerMode="screen">
      <AuthStackNavigator.Screen
        name="Auth"
        component={AuthScreen}
        options={{ title: "Getting Started", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="AuthPhone"
        component={AuthPhoneScreen}
        options={{ title: "Add Phone Number", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ResetPassword"
        component={ResetPasswordScreen}
        options={{ title: "Password Reset", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ChangePassword"
        component={ChangePasswordScreen}
        options={{ title: "Enter new password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{ title: "Forgot password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Login"
        component={LoginScreen}
        options={{ title: "Login", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Register"
        component={RegisterScreen}
        options={{ title: "Sign up to continue", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="VerificationMailSent"
        component={VerificationMailSentScreen}
        options={{
          title: "Verification mail sent",
          headerTitleAlign: "center",
        }}
      />
      <AuthStackNavigator.Screen
        name="VerifyMail"
        component={VerifyMailScreen}
        options={{ title: "Verifying your email", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="TermsAndConditions"
        component={TermsAndConditionsScreen}
        options={{ title: "Terms and Conditions", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicyScreen}
        options={{ title: "Privacy Policy", headerTitleAlign: "center" }}
      />
    </AuthStackNavigator.Navigator>
  );
};

// ----------- Home Stack Navigator ----------------
const HomeStackNavigator = createStackNavigator();
const HomeNavigator = () => {
  return (
    <HomeStackNavigator.Navigator headerMode="screen">
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
    </HomeStackNavigator.Navigator>
  );
};

// ----------- My Spaces Stack Navigator ----------------
const MySpacesStackNavigator = createStackNavigator();
const MySpacesNavigator = () => {
  return (
    <MySpacesStackNavigator.Navigator headerMode="screen">
      <MySpacesStackNavigator.Screen
        name="MySpaces"
        component={MySpacesScreen}
        options={{ title: "My Spaces" }}
      />
    </MySpacesStackNavigator.Navigator>
  );
};

// ----------- Account Stack Navigator ----------------
const AccountStackNavigator = createStackNavigator();
const AccountNavigator = () => {
  return (
    <AccountStackNavigator.Navigator headerMode="screen">
      <AccountStackNavigator.Screen
        name="Account"
        component={AccountScreen}
        options={{ title: "My Account" }}
      />
      <AccountStackNavigator.Screen
        name="MyProfile"
        component={MyProfileScreen}
        options={{ title: "My Profile" }}
      />
      <AccountStackNavigator.Screen
        name="RecentSearches"
        component={RecentSearchesScreen}
        options={{ title: "Recent Searches" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinHistory"
        component={CheckinHistoryScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinMonthlyList"
        component={CheckinMonthlyListScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseHistory"
        component={PurchaseHistoryScreen}
        options={{ title: "Purchase History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseDetails"
        component={PurchaseDetailsScreen}
        options={{ title: "Purchase Details" }}
      />
      <AccountStackNavigator.Screen
        name="Support"
        component={SupportScreen}
        options={{ title: "Support" }}
      />
      <AccountStackNavigator.Screen
        name="Faq"
        component={FaqScreen}
        options={{ title: "FAQ" }}
      />
      <AccountStackNavigator.Screen
        name="CouponCodes"
        component={CouponCodesScreen}
        options={{ title: "Coupon Codes" }}
      />
    </AccountStackNavigator.Navigator>
  );
};

// ----------- Bottom Tabs Navigator ----------------
const BottomTabNavigator = createBottomTabNavigator();
const BottomNavigator = () => {
  return (
    <BottomTabNavigator.Navigator>
      <BottomTabNavigator.Screen name="Home" component={HomeNavigator} />
      <BottomTabNavigator.Screen
        name="MySpaces"
        component={MySpacesNavigator}
      />
      <BottomTabNavigator.Screen name="Account" component={AccountNavigator} />
    </BottomTabNavigator.Navigator>
  );
};

// ----------- Final Stack Navigator ----------------
const FinalStackNavigator = createStackNavigator();
export const FinalNavigator = () => {
  const authContext = useContext(AuthContext);
  return (
    <FinalStackNavigator.Navigator>
      {authContext.isLoggedIn ? (
        <FinalStackNavigator.Screen
          name="Account"
          component={BottomNavigator}
          options={{ headerShown: false }}
        />
      ) : (
        <FinalStackNavigator.Screen name="Auth" component={AuthNavigator} />
      )}
    </FinalStackNavigator.Navigator>
  );
};

AppNavigator.tsx 代码不变，但粘贴在这里以供引用

AppNavigator.tsx

    export const AppNavigator = (props: any) => {
      return (
        <NavigationContainer>
          <FinalNavigator />
        </NavigationContainer>
      );
    };