双栈导航标题答案

【问题标题】：Double stack navigation headers双栈导航标题
【发布时间】：2021-10-02 17:01:59
【问题描述】：

我的应用显示 2 个标题。我只想要一个标题，我遵循的教程工作正常，但不适合我。导师用的是react navigation v5，我用的是v6。这是可能想看的代码。我有 3 个屏幕，1 个堆栈有两个屏幕，另一个有一个。请帮我解决它。

import * as React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./Screens/homeScreen";
import Archived from "./Screens/archived";
import NotesDetails from "./Screens/notesDetails";

const StackHome = createNativeStackNavigator();
const StackArchived = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator>
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

const ArchivedScreenStack = ({ navigation }) => {
  return (
    <StackArchived.Navigator>
      <StackArchived.Screen name="Home" component={Archived} />
    </StackArchived.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreenStack} />
        <Drawer.Screen name="NotesDetails" component={ArchivedScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

标签： javascript reactjs react-native navigation

【解决方案1】：

堆栈导航器能够采用决定其行为的选项（作为道具）。您可以使用 headerShown 属性隐藏给定堆栈导航器的标题。

https://reactnavigation.org/docs/stack-navigator/#headershown

const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator
      screenOptions={{ headerShown: false }}
    >
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

【讨论】：