使用主应用 Header 进行嵌套 StackNavigation

Question

我正在开发一个 React Native 应用程序，我在 App.js 主文件中创建了一个抽屉和一个 Stack Navigatior，我面临的问题是当我在抽屉中导航时到带有堆栈导航的页面，我得到 2 Headers（一个在另一个下面），有没有办法使用相同的 header（top header 或 Main header) 当我到达堆栈页面时。

这里是 App.js 代码：

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';

//Importacion de Screens
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailScreen';
import OrderSearchScreen from './src/screens/OrderSearchScreen';
import OrderNumberScreen from './src/screens/OrderNumberScreen';

const OrderStack = createStackNavigator();
const Drawer = createDrawerNavigator();

const OrderStackScreen = () =>(
  <OrderStack.Navigator screenOptions={{
    headerStyle: {
        backgroundColor: '#009387',
      },
      headerTintColor: '#fff',
      headerTitleStyle:{
        fontWeight: 'bold',
      } ,
      headerTitleStyle: { alignSelf: 'center' },
      /*headerShown: false*/      
}}>
    <OrderStack.Screen name="OrderSearchScreen" component={OrderSearchScreen}/>
    <OrderStack.Screen name="OrderNumberScreen" component={OrderNumberScreen}/>
</OrderStack.Navigator>
);
 
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" screenOptions={{
        headerStyle: {
          backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle:{
          fontWeight: 'bold',
        } ,
        headerTitleStyle: { alignSelf: 'center' },
      }}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Details" component={DetailsScreen} />
        <Drawer.Screen name="Orders" component={OrderStackScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我在堆栈中看到的内容：

我希望看到的是顶部 Header 发生变化而底部永远不会出现，因此顶部 Header 将具有正在访问的页面的标题，并且紧挨着抽屉图标（3行，我觉得叫汉堡包按钮），我得到箭头返回。

有没有办法做到这一点。

谢谢

Answer 1

隐藏堆栈 header 喜欢这个：

<OrderStack.Navigator screenOptions={{ headerShown: false }}>
    {/* whatever */}
</OrderStack.Navigator>

配置抽屉header以显示堆栈的屏幕名称：

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

// ...

<Drawer.Navigator
  initialRouteName="Home"
  screenOptions={({ route }) => {
    const routeName =
      getFocusedRouteNameFromRoute(route) ?? 'OrderSearchScreen';

    let headerTitle;

    switch (routeName) {
      case 'OrderSearchScreen':
        headerTitle = 'Search';
        break;
      case 'OrderNumberScreen':
        headerTitle = 'Order no.';
        break;
    }

    return {
      headerTitle,
      headerShown: true,
      headerStyle: { backgroundColor: '#009387' },
      headerTintColor: '#fff',
      headerTitleStyle: { fontWeight: 'bold' },
      headerTitleAlign: 'center',
    };
  }}
>
  {/* whatever */}
</Drawer.Navigator>;

文档：https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

如果您想同时显示汉堡菜单和后退图标，您需要使用 headerLeft 覆盖默认值。虽然同时显示两者是很不寻常的。

使用主应用 Header 进行嵌套 StackNavigation

Use the main App Header for Nested StackNavigation

react-native

react-navigation

navigation-drawer

stack-navigator