React Navigation栈导航中Chat页headerRight按钮跳转ProfileDetailScreen并传参

核心调整点 #

当前Chat页的header按钮没法跳转的原因，是在配置Screen的options时没有获取到navigation导航实例。React Navigation会自动为每个Screen的options配置函数注入{route, navigation}参数，直接用这个实例就能执行栈跳转，同时把Chat页持有的会话用户参数透传给ProfileDetail页面即可。

可直接替换的导航栈代码 #

<ProfileStack.Navigator>
  <ProfileStack.Screen 
    name="Search" 
    component={SearchScreen} 
    options={{ title: 'Discover'}} 
  />
  <ProfileStack.Screen 
    name="ProfileDetailScreen" 
    component={ProfileDetailScreen} 
    options={({ route }) => ({ 
      // 详情页支持读路由参数动态配置标题，不传参时用默认值兜底
      title: route.params?.username ?? 'Profile Detail'
    })} 
  />
  <ProfileStack.Screen 
    name="Messages" 
    component={MessagesScreen} 
    options={{ title: 'Messages'}} 
  />
  <ProfileStack.Screen 
    name="Chat" 
    component={ChatScreen} 
    options={({ route, navigation }) => ({
      title: route.params.thread.username,
      headerRight: () => (
        <Button
          onPress={() => navigation.push('ProfileDetailScreen', {
            // 透传详情页需要的全部参数，字段和Chat页拿到的thread数据保持对齐
            userId: route.params.thread.userId,
            username: route.params.thread.username,
            avatarUrl: route.params.thread.avatarUrl,
            // 其余详情页需要的自定义字段可在此处追加
          })}
          title="View Profile"
          color="black"
        />
      ),
    })} 
  />
</ProfileStack.Navigator>

注意事项 #

• 跳转方法选用navigation.push适配聊天场景交互：从Chat页打开的资料页，用户点击返回时会直接回到原会话页，栈层级逻辑清晰。如果需要复用栈内已存在的ProfileDetail实例（不新增页面层级），可将push替换为navigate。
• 原代码中Chat页错误使用<MessageStack.Screen>标签的笔误需要修正，确保所有需要互相跳转的页面挂载在同一个导航栈下，否则会触发“路由名未定义”的运行报错。
• ProfileDetailScreen组件内部可通过route对象直接读取跳转传入的所有参数，实现页面内容、头部配置的动态渲染。

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