react-native - 尝试在 native react 中仅显示堆栈导航标题时关闭抽屉标题

Question

//我正在构建一个 React Native 应用程序，我同时使用了抽屉导航和堆栈导航。问题在于，抽屉和堆栈导航都提供了自己的标题。结果它在每个屏幕上显示两个标题，但我只想在特定屏幕上显示一个。我怎样才能在只需要堆栈导航标题的地方关闭抽屉标题？？

                                      MainStack.js

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

//The pages to navigate between in stack
        
import {Home} from "../components/Home";
import {Notes} from "../components/Notes";

//Default Title holders
        
import * as DefaultTitle from "../components/DefaultTitles";

//Creating navigation constant 
        
const Stack = createStackNavigator();

export function MainStack(){
    return(
            <Stack.Navigator>
                <Stack.Screen
                    name={DefaultTitle.HomeTitle}
                    component={Home} 

      //Here i only need drawer header, so i have successfuly dismissed the stack header 

        options={{headerTitleAlign: "center", headerShown: false,}} />
            
                <Stack.Screen name="Notes" component={Notes} />
            </Stack.Navigator>
    );
}

                           DrawerStack.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

//imported pages
import {MainStack} from "./MainStack";
import {AboutStack} from "./AboutStack";

//Default holders
import * as DefaultTitle from "../components/DefaultTitles";

//Creating navigation constant
const Drawer = createDrawerNavigator();

export default function DrawerStack(){
    return(    
        <Drawer.Navigator >
            <Drawer.Screen name="Home" component={MainStack}/>
            <Drawer.Screen name="About" component={AboutStack} />
        </Drawer.Navigator> 
    )
}

                          App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

//imported Main Route
import DrawerStack from "./navigationRoutes/DrawerStack";

export default function App() {
  return (
     <NavigationContainer>
        <DrawerStack />
     </NavigationContainer>
  );
}

Answer 1

您可以通过将以下属性添加到 <Drawer.Screen /> 来从抽屉导航器中删除标题组件:

<Drawer.Screen options={{headerShown: false}} />

这将从抽屉导航器内的抽屉屏幕中删除标题，并根据您的要求为您留下堆栈导航器标题!

编辑:更好的是，如果你想从所有屏幕上完全删除它们，你可以使用 screenOptions像这样在导航器上支撑:

<Drawer.Navigator screenOptions={{headerShown: false}} />

这将删除 Drawer.Navigator 内的所有屏幕标题家长!