React Navigation v6中如何将屏幕数据传回不同父导航器

针对你遇到的同一个DataScreen被两个导航器调用，需将数据传回对应导航器并做差异化处理的场景，这里提供两种可行方案，避开传递不可序列化函数的限制：

方案一：React Context 解耦处理逻辑 #

利用React Context机制，让每个导航器提供自己的数据处理函数，DataScreen自动匹配所在导航器的Context并传递数据，完全绕过导航参数序列化限制。

步骤1：创建专属Context #

import { createContext, useContext } from 'react';

// 为两个导航器分别创建Context
const Stack1DataContext = createContext(null);
const Stack2DataContext = createContext(null);

步骤2：导航器中注入处理函数 #

在每个导航器内部用Context Provider包裹，传入对应的数据处理逻辑：

const Stack1 = createStackNavigator();

const Stack1Navigator = () => {
  // Stack1专属的数据处理逻辑（Way 1）
  const handleStack1Data = (data) => {
    console.log('Stack1 处理数据:', data);
    // 这里写你的具体业务逻辑，比如存状态、发起请求等
  };

  return (
    <Stack1DataContext.Provider value={handleStack1Data}>
      <Stack1.Navigator>
        <Stack1.Screen name='dataScreen' component={DataScreen} />
      </Stack1.Navigator>
    </Stack1DataContext.Provider>
  );
};

// Stack2同理
const Stack2 = createStackNavigator();

const Stack2Navigator = () => {
  // Stack2专属的数据处理逻辑（Way 2）
  const handleStack2Data = (data) => {
    console.log('Stack2 处理数据:', data);
    // 这里写Stack2的业务逻辑
  };

  return (
    <Stack2DataContext.Provider value={handleStack2Data}>
      <Stack2.Navigator>
        <Stack2.Screen name='dataScreen' component={DataScreen} />
      </Stack2.Navigator>
    </Stack2DataContext.Provider>
  );
};

步骤3：DataScreen中消费Context传递数据 #

DataScreen只需获取当前所在导航器的Context，调用对应的处理函数即可：

const DataScreen = ({ navigation }) => {
  const stack1Handler = useContext(Stack1DataContext);
  const stack2Handler = useContext(Stack2DataContext);

  // 组件内部生成的数据
  const data = { data: "someData" };

  // 根据当前所处导航器调用对应处理函数
  if (stack1Handler) {
    stack1Handler(data);
  } else if (stack2Handler) {
    stack2Handler(data);
  }

  navigation.goBack();
};

方案二：导航参数传递标识 + 焦点监听 #

通过跳转时传递导航源标识，DataScreen返回时携带数据，父导航器内的页面通过焦点监听获取并处理数据。

步骤1：跳转时传递源标识 #

从Stack1/Stack2的页面跳转到DataScreen时，传入source参数：

// Stack1内的页面示例
const Stack1Home = ({ navigation }) => {
  return (
    <Button 
      title="打开DataScreen" 
      onPress={() => navigation.navigate('dataScreen', { source: 'stack1' })} 
    />
  );
};

// Stack2内的页面同理，传递source: 'stack2'

步骤2：DataScreen返回时携带数据 #

const DataScreen = ({ navigation, route }) => {
  const data = { data: "someData" };
  const source = route.params?.source;

  // 返回上一页并携带数据（或用navigation.setParams后再goBack）
  navigation.navigate(
    route.name, 
    { ...route.params, returnedData: data, source }
  );
};

步骤3：父页面监听焦点处理数据 #

在Stack1/Stack2的页面中，用useFocusEffect监听参数变化，拿到数据后做对应处理：

// Stack1内的页面示例
import { useFocusEffect } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';
import React from 'react';

const Stack1Home = ({ navigation }) => {
  const route = useRoute();

  useFocusEffect(
    React.useCallback(() => {
      const returnedData = route.params?.returnedData;
      if (returnedData) {
        // Stack1的专属处理逻辑（Way 1）
        console.log('Stack1 处理返回数据:', returnedData);
        // 处理后清除参数，避免重复触发
        navigation.setParams({ returnedData: null });
      }
    }, [route.params, navigation])
  );

  return <Button title="打开DataScreen" onPress={() => navigation.navigate('dataScreen', { source: 'stack1' })} />;
};

// Stack2内的页面同理，实现Way 2的处理逻辑

方案对比 #

• Context方案：代码解耦性强，逻辑清晰，无需依赖导航参数，适合复杂场景。
• 参数监听方案：无需额外创建Context，代码更轻量化，适合简单场景。

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