如何使用React Navigation不跳转页面给其他屏幕传递参数？

针对你需要在不跳转的情况下更新其他屏幕参数，让用户后续进入该屏幕时看到变化的需求，这里提供两种可行的实现方案：

方案一：通过导航容器Ref修改路由参数 #

利用React Navigation的导航容器Ref直接修改目标路由的参数，保持当前屏幕不变：

1. 创建导航容器Ref
   在根组件中定义导航容器的Ref，方便全局访问导航状态：

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

const navigationRef = React.createRef();

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* 你的导航栈/标签栏结构 */}
    </NavigationContainer>
  );
}

2. 在当前组件更新目标路由参数
   在CurrentComponent中，通过Ref找到目标路由并更新其参数，注意不要修改当前屏幕的索引，避免跳转：

const CurrentComponent = () => {
  const handleUpdateOtherParams = () => {
    const rootState = navigationRef.current.getRootState();
    // 找到目标路由（替换成你实际的路由名称）
    const targetRouteIdx = rootState.routes.findIndex(route => route.name === 'OtherComponent');
    
    if (targetRouteIdx !== -1) {
      const updatedRoutes = [...rootState.routes];
      // 合并原有参数与新参数
      updatedRoutes[targetRouteIdx] = {
        ...updatedRoutes[targetRouteIdx],
        params: {
          ...updatedRoutes[targetRouteIdx].params,
          shouldShowValue: true
        }
      };

      // 重置导航状态，保持当前屏幕索引不变
      navigationRef.current.resetRoot({
        ...rootState,
        routes: updatedRoutes,
        index: rootState.index
      });
    }
  };

  return <Button onPress={handleUpdateOtherParams} title="更新其他页面参数" />;
};

3. 目标组件监听参数变化
   在OtherComponent中，使用useRoute获取参数，并通过useEffect监听参数变化同步到本地状态：

import { useRoute } from '@react-navigation/native';
import { useState, useEffect } from 'react';

const OtherComponent = () => {
  const route = useRoute();
  const [shouldShow, setShouldShow] = useState(route.params?.shouldShowValue || false);

  // 监听路由参数更新，同步到本地状态
  useEffect(() => {
    setShouldShow(route.params?.shouldShowValue || false);
  }, [route.params]);

  return shouldShow ? <Button title="Yayy this button appears now" /> : null;
};

方案二：使用全局状态管理（推荐） #

路由参数更适合传递跳转时的临时数据，对于需要持久化的跨组件状态，使用全局状态管理（如Context API）更可靠、清晰：

1. 创建全局参数Context
   定义一个Context来管理各屏幕的参数状态：

import React, { createContext, useContext, useState, useCallback } from 'react';

const ScreenParamsContext = createContext();

export function ScreenParamsProvider({ children }) {
  const [screenParams, setScreenParams] = useState({
    OtherComponent: { shouldShowValue: false }
  });

  // 封装更新指定屏幕参数的方法
  const updateScreenParams = useCallback((screenName, newParams) => {
    setScreenParams(prev => ({
      ...prev,
      [screenName]: {
        ...prev[screenName],
        ...newParams
      }
    }));
  }, []);

  return (
    <ScreenParamsContext.Provider value={{ screenParams, updateScreenParams }}>
      {children}
    </ScreenParamsContext.Provider>
  );
}

// 自定义Hook简化调用
export function useScreenParams() {
  return useContext(ScreenParamsContext);
}

2. 根组件包裹Provider
   在App最外层包裹ScreenParamsProvider：

function App() {
  return (
    <ScreenParamsProvider>
      <NavigationContainer>
        {/* 导航结构 */}
      </NavigationContainer>
    </ScreenParamsProvider>
  );
}

3. 当前组件更新全局参数
   在CurrentComponent中调用全局方法更新参数：

import { useScreenParams } from './path-to-your-context';

const CurrentComponent = () => {
  const { updateScreenParams } = useScreenParams();

  const handleShowButton = () => {
    updateScreenParams('OtherComponent', { shouldShowValue: true });
  };

  return <Button onPress={handleShowButton} title="显示其他页面按钮" />;
};

4. 目标组件读取全局参数
   在OtherComponent中直接读取全局状态：

import { useScreenParams } from './path-to-your-context';

const OtherComponent = () => {
  const { screenParams } = useScreenParams();
  const shouldShow = screenParams.OtherComponent.shouldShowValue;

  return shouldShow ? <Button title="Yayy this button appears now" /> : null;
};

方案对比 #

• 方案一依赖React Navigation的内部路由结构，适合简单场景，但如果导航结构复杂（如嵌套路由）可能需要调整逻辑。
• 方案二更符合React的状态管理理念，代码解耦性更强，适合需要跨多个组件共享状态的场景，推荐优先使用。

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