React Navigation Drawer中带参数navigate()模拟goBack()的实现方案

针对你遇到的Drawer导航器下从ScreenC返回ScreenB传参的问题，以下是几个合规且实用的解决方案：

方案1：使用navigate配合replace选项替换路由 #

直接在ScreenC中调用navigate时传入replace: true选项，这样会用带参数的ScreenB替换当前的ScreenC路由，既传递了参数，又不会新增路由条目，保证返回键能正确回到ScreenA：

// ScreenC中的返回逻辑
navigation.navigate('ScreenB', { yourParam: '需要传递的值' }, { replace: true });

适用场景：参数为可序列化类型（字符串、数字、普通对象等），且不需要保留ScreenC的路由状态。

方案2：通过dispatch更新前序Screen的参数后goBack #

利用React Navigation的SET_PARAMS action，直接更新路由栈中已存在的ScreenB的参数，再调用goBack返回，完全保留原导航历史：

// ScreenC中的返回逻辑
import { CommonActions } from '@react-navigation/native';

const updatePrevScreenParams = () => {
  const state = navigation.getState();
  // 找到路由栈中ScreenB的条目
  const screenBRoute = state.routes.find(route => route.name === 'ScreenB');
  
  if (screenBRoute) {
    // 更新ScreenB的参数
    navigation.dispatch(
      CommonActions.setParams({
        params: { yourParam: '需要传递的值' },
        key: screenBRoute.key,
      })
    );
  }
  
  // 返回ScreenB
  navigation.goBack();
};

在ScreenB中，你可以通过useEffect监听route.params的变化来处理传递过来的参数：

// ScreenB中监听参数变化
import { useEffect } from 'react';
import { useRoute } from '@react-navigation/native';

const route = useRoute();

useEffect(() => {
  if (route.params?.yourParam) {
    // 处理传递过来的参数
    console.log('收到参数:', route.params.yourParam);
    // 可选：处理后清空参数避免重复触发
    navigation.setParams({ yourParam: undefined });
  }
}, [route.params]);

适用场景：需要严格保留原导航历史（返回时从ScreenB回到ScreenA），且参数为可序列化类型。

方案3：使用全局状态管理传递参数 #

借助Redux、Zustand、React Context等全局状态管理工具，在ScreenC中更新全局状态，ScreenB监听状态变化并处理：

1. 定义全局状态（以Zustand为例）：

import { create } from 'zustand';

const useParamStore = create((set) => ({
  passedParam: null,
  setPassedParam: (param) => set({ passedParam: param }),
  clearPassedParam: () => set({ passedParam: null }),
}));

2. ScreenC中更新状态并返回：

const { setPassedParam } = useParamStore();

const goBackWithParam = () => {
  setPassedParam('需要传递的值');
  navigation.goBack();
};

3. ScreenB中监听状态变化：

const { passedParam, clearPassedParam } = useParamStore();

useEffect(() => {
  if (passedParam) {
    // 处理参数
    console.log('收到参数:', passedParam);
    clearPassedParam();
  }
}, [passedParam]);

适用场景：参数复杂、需要跨多个屏幕传递，或者不希望依赖导航路由参数的场景。

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