React Native中自定义Header如何自动动态更新Stack导航标题

问题根源 #

React Navigation 中 headerTitle 配置项是一个内置渲染函数，调用时会自动传入包含路由信息、页面配置、导航对象的参数集合。你之前的写法直接丢弃了所有传入的参数，导致Header组件无法获取当前页面的动态信息，只能渲染写死的静态文本。

实现步骤 #

1. 修正App.js中的参数透传逻辑 #

将原来空参渲染Header的写法调整为，把导航内置的回调参数完整传递给Header组件：

// App.js 内的Stack.Navigator配置
<Stack.Navigator 
  screenOptions={{
    // 接收headerTitle回调收到的所有导航参数，完整透传给Header
    headerTitle: (navProps) => <Header {...navProps} />
  }} 
  initialRouteName="AppTabs"
>
  <Stack.Screen name="AppTabs" component={AppTabs} />
  {/* 其他路由页面直接复用全局Header即可 */}
  <Stack.Screen 
    name="Profile" 
    component={ProfilePage}
    // 给页面配置自定义的头部标题
    options={{ title: "个人中心" }}
  />
</Stack.Navigator>

2. 调整Header组件的取值渲染逻辑 #

修改Header.js，从接收到的参数中提取当前页面的标题值，替换原来写死的静态文本：

// shared/Header.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Entypo } from '@expo/vector-icons'; 

const Header = ({ navigation, route, options }) => {
  // 标题取值逻辑：*优先使用页面自定义的title*，无自定义时自动用路由名称兜底
  const displayTitle = options?.title ?? route.name;

  return (
    <View style={styles.header}>
      <Entypo 
        name="menu" 
        size={24} 
        color="black" 
        // 可直接绑定菜单的跳转、抽屉打开等交互逻辑
        onPress={() => navigation.openDrawer()}
      />
      <View>
        {/* 渲染动态标题，和你预期的写法完全一致 */}
        <Text style={styles.headerText}>{displayTitle}</Text>
      </View>
    </View>
  )
};

const styles = StyleSheet.create({
  // 保留你原有的头部、文本样式即可
})

常见扩展用法 #

• 进入页面后如果需要根据接口返回的数据动态修改标题，直接在页面组件内调用navigation.setOptions({ title: "接口返回的页面标题" })即可，全局复用的Header会自动同步更新，不需要重新引入或修改Header组件。
• 如果需要给全局Header传额外的自定义配置（比如主题色、按钮显隐状态），在透传参数时把自定义属性一起传给Header即可，不会和导航自带的参数冲突。

注意：透传参数时不要覆盖导航自带的属性，否则会导致点击、跳转等导航能力失效。

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