react-native - 使用嵌套 StackNavigation 的主 App Header

问题描述

我正在开发一个 React Native App，我在主 App.js 文件上创建了一个 Drawer 和一个 Stack Navigatior，我面临的问题是，当我通过 Drawer 导航到具有 Stack Navigation 的页面时，我得到 2 个标题（一个在另一个下方），当我到达堆栈页面时，有没有办法使用相同的标题（顶部标题或主标题）。

这是 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 永远不会出现，因此 Top Header 将具有正在访问的页面的标题，并且紧挨着抽屉图标（3 行，我认为它被称为汉堡按钮），我让箭头回去。

有没有办法做到这一点。

谢谢

标签： react-nativereact-navigationnavigation-drawerstack-navigator

像这样隐藏堆栈头：

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

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

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则需要使用覆盖默认选项。尽管同时显示两者是非常不寻常的。

react-native - 使用嵌套 StackNavigation 的主 App Header

问题描述

解决方案

推荐阅读