React Native多卡片导航场景下如何刷新导航参数？

你贴的PaymentScreen（参数发起页）的代码本身没有逻辑问题——每次遍历渲染卡片时，传给morePayments的itemId都是当前卡片对应的正确ID。问题全部出在接收参数的morePayments页面逻辑，结合React Navigation的默认导航机制，核心原因是两个：

• 栈导航模式下，调用navigation.navigate时，如果目标页面（morePayments）已经存在于导航栈中，不会重新创建目标页面的组件实例，只会把你新传的参数，合并到这个页面旧的route.params对象里。
• 绝大多数同类问题的触发点：morePayments页面在初始化时，把route.params的值「固化」到了本地状态——比如把route.params.itemId作为useState的初始值、或者写了空依赖的useEffect读参数发请求。这种写法下，就算route.params更新了，因为组件没有重新挂载，固化的状态值、只跑一次的请求逻辑都不会变，自然一直显示旧参数的内容。

方案1：目标页面监听焦点/参数变化同步逻辑（推荐） #

这个方案不破坏原有导航栈结构，性能最优，也是React Navigation官方推荐的参数更新处理方式。
在morePayments页面引入useFocusEffect（来自@react-navigation/native），每次页面获得焦点时，读取最新的route.params，同步更新本地状态、重新拉取详情数据，核心代码片段：

// morePayments 页面核心逻辑
import { useFocusEffect } from '@react-navigation/native';
import React, { useState } from 'react';

const MorePaymentsScreen = ({ route, navigation }) => {
  // 首次渲染时读一次参数，避免页面初始空白
  const [currentItemId, setCurrentItemId] = useState(route.params?.itemId);
  const [detailData, setDetailData] = useState(null);

  // 页面每次获焦时同步最新参数
  useFocusEffect(
    React.useCallback(() => {
      // 直接从route.params拿最新值，不依赖初始化时的旧值
      const latestId = route.params?.itemId;
      setCurrentItemId(latestId);
      // 用最新的ID请求对应详情数据
      fetch(`详情接口地址?itemId=${latestId}`)
        .then(res => res.json())
        .then(data => setDetailData(data));
    }, [route.params?.itemId]) // 依赖参数变化，参数更新就重新执行逻辑
  )

  // 剩余页面渲染逻辑...
}

方案2：发起导航时用push替代navigate #

如果业务场景要求每次点击卡片都打开一个独立的详情页实例，那可以把发起页里原来的跳转逻辑改掉：
你当前发起页的跳转代码：

forwardLink={() => navigation.navigate('morePayments',{itemId: Aname.id})}

修改为：

forwardLink={() => navigation.push('morePayments',{itemId: Aname.id})}

• 注意：push每次跳转都会在导航栈中新增一个独立的详情页实例，每次都是全新挂载的组件，自然会读取到最新的参数。但这种写法会让栈中堆积大量重复的详情页，用户返回时需要多次点击才能回到列表页，适合需要多层级详情返回的特殊场景，常规业务不推荐使用。

方案3：直接渲染route.params，不要固化参数到本地状态 #

如果详情页只是简单展示传递过来的参数，不需要复杂的状态逻辑，那就不要在morePayments页面里把route.params的值复制到本地useState中，直接在渲染时读取route.params即可——这种写法下就算route.params更新，渲染内容也会自动同步。

• 检查morePayments页面有没有在空依赖的useEffect、useState初始值里过早读取参数，把动态的参数值固化成了不更新的静态值。
• 检查导航配置里有没有给morePayments设置写死的initialParams，这种静态参数会覆盖动态传入的参数值。

内容的提问来源于stack exchange，提问作者tecs-x