如何通过自定义getStateFromPath实现页面向初始路由传参

要实现从ScreenB的URL中提取param1和param2并传递给初始路由ScreenA，你可以这样重写getStateFromPath方法：

import { getStateFromPath as defaultGetStateFromPath } from '@react-navigation/native';

const config: {
  initialRouteName?: any;
  screens: PathConfigMap<RootStackParamsList>;
} = {
    initialRouteName: "ScreenA",
    screens: {
        ScreenA: {
            path: "ScreenA",
            parse: {
                param1: Number,
                param2: Number
            }
        },
        ScreenB: {
            path: "ScreenB/:param1/:param2", // 修正path格式，用冒号标记参数占位符
            parse: {
                param1: Number,
                param2: Number
            }
        }
    }
}

const linkingOptions: LinkingOptions<ReactNavigation.RootParamList> = {
  prefixes: [Linking.makeUrl("/")],
  config: config,
  getStateFromPath(path, config) {
    // 调用默认解析函数获取基础路由状态
    const state = defaultGetStateFromPath(path, config);

    // 检查当前路由是否为ScreenB且包含目标参数
    if (state.routes[0].name === 'ScreenB') {
      const { param1, param2 } = state.routes[0].params || {};

      // 参数存在时，将携带参数的ScreenA加入路由栈
      if (param1 !== undefined && param2 !== undefined) {
        return {
          ...state,
          routes: [
            { name: 'ScreenA', params: { param1, param2 } },
            ...state.routes
          ],
          index: state.routes.length // 保持ScreenB为当前活跃路由
        };
      }
    }

    // 其他场景返回默认解析结果
    return state;
  }
}

关键细节说明： #

• 先复用defaultGetStateFromPath获取默认解析的路由状态，避免重复实现参数解析逻辑
• 修正ScreenB的path配置：原写法会把param1/param2当作固定路径片段，改成"ScreenB/:param1/:param2"才能正确识别URL中的动态参数
• 若不需要保留ScreenB在路由栈中，可直接替换路由数组为[{ name: 'ScreenA', params: { param1, param2 } }]，并将index设为0

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