React Native 用navigationOptions配置Header不生效（v4版本）

常见失效触发原因 #

• 配置属性名混淆：React Navigation v4版本中，defaultNavigationOptions是传入createStackNavigator第二个参数的全局共享配置项，不能作为页面组件的静态属性挂载；页面组件可直接识别的静态导航配置属性为navigationOptions，属性名写错会导致配置完全不被导航器解析。
• 组件绑定规则不匹配：如果使用函数式组件编写页面，未在组件函数作用域外正确挂载静态属性，也会导致导航器扫描不到对应配置。
• 路由注册层级错误：createStackNavigator第一个参数的路由配置结构要求每个路由项必须包含screen字段指向对应页面组件，若存在配置嵌套层级错位，也会让预设的header样式失效。

可直接落地的正确配置写法 #

写法1：页面组件内单独配置（适合单页面差异化样式） #

修改categoriesScreen.js中的静态配置属性名，将原来的defaultNavigationOptions替换为navigationOptions，参考实现：

// categoriesScreen.js 核心代码
const CategoriesScreen = (props) => {
  // 页面实际渲染逻辑
  return <View>{/* 分类页内容 */}</View>
}

// 正确的静态配置绑定
CategoriesScreen.navigationOptions = {
  headerTitle: 'Meal Categories',
  headerTitleStyle: {
    fontSize: 22,
    textAlign: 'center'
  }
}

export default CategoriesScreen

写法2：路由注册阶段统一配置（适合集中管理导航样式） #

在MealsNavigator.js注册路由时，直接为对应路由绑定专属导航配置，全局默认样式通过createStackNavigator的第二个参数传入，参考实现：

// MealsNavigator.js 核心代码
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

const MealsNavigator = createStackNavigator(
  {
    // 注册路由并绑定单页配置
    Categories: {
      screen: CategoriesScreen,
      navigationOptions: {
        headerTitle: 'Meal Categories',
        headerTitleStyle: {
          fontSize: 22,
          textAlign: 'center'
        }
      }
    },
    CategoryMeals: { screen: CategoryMealsScreen },
    MealDetail: { screen: MealDetailScreen }
  },
  // 全局共享的默认header配置
  {
    defaultNavigationOptions: {
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: '#f5f5f5'
      }
    }
  }
)

export default createAppContainer(MealsNavigator)

生效验证注意事项 #

• 配置修改完成后需完全重启Metro服务，不要仅依赖热更新/快速刷新，RN对组件静态属性的变更不会触发热更新自动扫描。
• 排查时可先设置辨识度高的临时样式（比如将header背景改为亮红色），先打通配置传递链路，再逐步调整字号、对齐方式等细节样式。

内容的提问来源于stack exchange，提问作者Suvra.D