React Navigation 头部Props传递异常问题求助

问题原因 #

你的Header组件始终获取第一个栈（Home）的Prop值，是因为React Navigation对静态定义的options对象存在缓存复用，导致路由切换时Header组件实例未更新，或者你的Header组件未正确响应Props变化。

解决方案 #

方案1：利用路由信息动态传递Props #

将通用的头部配置抽离到screenOptions中，通过当前路由的name动态传递给Header组件，避免重复配置且确保Props随路由更新：

<NavigationContainer theme={MyTheme}>
  <Stack.Navigator 
    initialRouteName="Home"
    screenOptions={{
      headerTitleAlign: 'center', 
      headerStyle: {
        backgroundColor: 'black', 
        borderBottomWidth: 0, 
        shadowOpacity: 0, 
        elevation: 0
      },
      // 通过route.name动态获取当前页面标识
      headerTitle: ({ route }) => <Header prop={route.name} />
    }}
  >
    <Stack.Screen
      name="Auth"
      component={CryptoAuth}
      options={{ headerShown: false }}
    />
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="CollectionDetails" component={CollectionDetails} />
    <Stack.Screen name="NFTDetails" component={NFTDetails} />
    <Stack.Screen name="Profile" component={Profile} />
  </Stack.Navigator>
</NavigationContainer>

方案2：确保Header组件响应Props更新 #

如果Header组件使用了React.memo优化，需配置正确的对比函数，确保Prop变化时触发重渲染：

// 调整Header组件的memo配置
const Header = React.memo(({ prop }) => {
  console.log(prop);
  // 你的头部渲染逻辑
}, (prevProps, nextProps) => {
  // 当prop不同时返回false，强制重渲染
  return prevProps.prop === nextProps.prop;
});

原写法问题分析 #

原写法中每个Screen单独定义静态options对象，虽然每个都指定了不同的Prop，但React Navigation在管理头部组件时，未正确销毁/重建Header实例，导致一直复用第一个Home页面的组件实例，最终Prop值始终为Home。而通过screenOptions结合路由参数的方式，能确保每次路由切换时，Header组件接收到最新的页面标识，从而输出正确的Prop值。

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