如何配置React Navigation让TabNavigator自动传递参数至子屏幕

一、实现Tab2自动将参数传递给Screen1 #

完全可以实现Tab2自动向下传递参数到子屏幕，不用手动重复传参，这里提供两种可行方案：

方案1：通过Tab包裹组件传递初始参数 #

给Tab2做一层自定义包裹组件，获取Tab路由上的id参数，再传递给子导航器的初始屏幕：

// 自定义Tab2的包裹组件
function Tab2Wrapper({ route }) {
  const { id } = route.params;
  
  return (
    <Tab2Stack.Navigator initialRouteName="Screen1">
      {/* 直接给Screen1传递初始参数 */}
      <Tab2Stack.Screen
        name="Screen1"
        component={Screen1}
        initialParams={{ id }}
      />
      <Tab2Stack.Screen name="Screen2" component={Screen2} />
    </Tab2Stack.Navigator>
  );
}

// 在根Tab导航器中注册Tab2
<Tab.Navigator>
  <Tab.Screen name="Tab1" component={Tab1} />
  <Tab.Screen name="Tab2" component={Tab2Wrapper} />
</Tab.Navigator>

调用导航时只需传Tab2的参数：navigation.navigate('Tab2', { id: 123 })，Screen1就能通过route.params.id拿到值。

方案2：监听Tab参数变化同步到子屏幕 #

如果需要实时同步Tab参数的变化（比如从Screen2切回Screen1时也能拿到最新id），可以用监听的方式：

function Tab2Wrapper({ route, navigation }) {
  const tabStackRef = useRef();

  // 监听Tab2路由参数变化，同步更新Screen1的参数
  useEffect(() => {
    if (route.params?.id) {
      tabStackRef.current?.navigate('Screen1', { id: route.params.id });
    }
  }, [route.params]);

  return (
    <Tab2Stack.Navigator ref={tabStackRef}>
      <Tab2Stack.Screen name="Screen1" component={Screen1} />
      <Tab2Stack.Screen name="Screen2" component={Screen2} />
    </Tab2Stack.Navigator>
  );
}

二、解决旧数据显示延迟问题 #

你遇到的“传id给Screen1即使不用，旧数据就消失”的现象，本质是参数变化触发了Screen1重新渲染，此时组件可以通过路由参数直接拿到目标id，提前判断是否展示数据。结合上面的参数传递方案，做以下优化：

1. 在Screen1中添加参数校验 #

让Screen1通过路由参数拿到目标id，和Context中的id做对比，不匹配时直接显示加载/占位视图：

function Screen1({ route }) {
  const { id: targetId } = route.params;
  const { id: contextId, data } = useContext(ContextProvider1);

  // 路由id和Context id不一致时，不展示旧数据
  if (targetId !== contextId) {
    return <div>加载中...</div>;
  }

  return <DataView data={data} />;
}

2. 优化Context的id更新逻辑 #

在ContextProvider1中，调用setId时先清空数据，避免延迟期间显示旧内容：

function ContextProvider1({ children }) {
  const [id, setId] = useState(null);
  const [data, setData] = useState(null);

  const updateId = (newId) => {
    // 先清空数据，再更新id
    setData(null);
    setId(newId);
    // 发起异步请求获取新数据
    fetchData(newId).then(res => setData(res));
  };

  return (
    <Context.Provider value={{ id, data, setId: updateId }}>
      {children}
    </Context.Provider>
  );
}

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