React Navigation v6特定导航路径下参数传递失败问题求助

问题核心原因 #

你遇到的问题本质是React Navigation的默认导航逻辑导致的：当导航栈中已经存在目标页面（screenB）的实例时，调用navigation.navigate('screenB', params)会触发返回（pop）操作回到已有的页面实例，不会重新传递新参数或创建新实例。而screenA->screenC->screenB的路径中，screenB是首次入栈的新实例，所以参数能正常传递。

针对性解决办法 #

根据你的循环导航业务场景（screenA->screenB->screenC->screenB->screenC...），推荐以下三种方案：

方案1：用push替代navigate创建新实例 #

如果需要保留完整的导航历史（允许返回之前的screenB/screenC实例），直接使用push方法：

// 在screenC中跳转至screenB时
navigation.push('screenB', {
  // 传入你的业务参数
  orderId: '123',
  status: 'updated'
});

每次调用push都会在栈中新增一个screenB实例，参数会被正常传递，完全适配循环跳转的业务需求。

方案2：复用现有实例并更新参数 #

如果不需要保留多个screenB实例，希望复用栈中已有的实例并更新参数，可以结合焦点监听和参数更新：

1. 在screenB中监听参数变化：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

function ScreenB({ route }) {
  useFocusEffect(
    useCallback(() => {
      // 每次页面聚焦时读取最新参数
      const { orderId, status } = route.params || {};
      // 执行参数对应的业务逻辑
      if (orderId) {
        // 更新页面数据或状态
      }
    }, [route.params])
  );

  // 页面其他逻辑
}

2. 在screenC中更新参数并返回：

// 在screenC中
navigation.navigate('screenB'); // 回到已有的screenB实例
navigation.setParams({
  orderId: '456',
  status: 'processed'
});

方案3：重置导航栈（清理历史场景） #

如果循环导航时不需要保留之前的页面历史，可以用reset方法重置栈结构：

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1, // 保留screenA在栈底，新增screenB实例
    routes: [
      { name: 'screenA' },
      { name: 'screenB', params: { orderId: '789' } }
    ]
  })
);

该方案适合不需要返回之前screenB实例的场景，能彻底清理冗余的导航历史。

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