双栈导航 headers

Question

我的应用显示 2 header 秒。我只想要一个 header 我正在学习的教程工作正常但不适合我。导师使用的是 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>
  );
}

Answer 1

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

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>
  );
};

双栈导航 headers

Double stack navigation headers

javascript

navigation

reactjs

react-native