如何为react-navigation设置全局唯一静态头部？

当前代码在Stack.Navigator的screenOptions里配置自定义Header，会导致每个页面切换时都重新生成一个Header实例。要实现全局唯一的静态头部，只需把Header移到导航器外层，同时隐藏系统默认的头部：

修改后的完整代码 #

import React from 'react';
import { View } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Home, Account, Cart } from '../screens';
import Header from '../components/Header';

const Router = () => {
  const Stack = createNativeStackNavigator<NavigationParams>();
  return (
    <View style={{ flex: 1 }}>
      {/* 静态Header放在导航器外层，全局仅渲染一次 */}
      <Header />
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // 关闭系统默认头部
          animation: 'slide_from_right',
        }}
        initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Account" component={Account} />
        <Stack.Screen name="Cart" component={Cart} />
      </Stack.Navigator>
    </View>
  );
};

export default Router;

关键说明 #

• 隐藏系统头部：通过headerShown: false关闭导航自带的头部，避免和自定义Header布局冲突。
• 外层放置Header：将<Header />放在Stack.Navigator外层的View中，它只会在Router组件初始化时渲染一次，页面切换时不会重新生成，完美实现静态效果。
• 布局适配：外层View设置flex: 1，确保Header和导航器共同占满整个屏幕高度。

如果你的Header需要调用导航方法（比如页面跳转），可以在Header组件内部直接用useNavigation钩子获取导航实例，无需通过props传递：

// Header组件内部示例
import { useNavigation } from '@react-navigation/native';

const Header = () => {
  const navigation = useNavigation();
  
  const goToCart = () => {
    navigation.navigate('Cart');
  };

  return (
    // 你的Header布局，比如包含购物车跳转按钮
    <View>
      <Button title="购物车" onPress={goToCart} />
    </View>
  );
};

内容的提问来源于stack exchange，提问作者qqqwerqqq