reactjs - 在 React-navigation 6+ 中深度链接屏幕的多个路径

Question

我有一些屏幕需要支持多个深度链接路径，如下所示:

export const navigationConfig = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          Article: {
             path: [ // This needs to be an array not a string 
                'teams/first-team/content/:id',
                'teams/handball/content/:id',
                'teams/club/content/:id',
            ],
            exact: false
          },
         // ...
        }
     }
    }
  }

在react-navigation 6深度链接中是否有任何方法可以将数组或正则表达式提供作为路径？

这里有一个旧答案:react-navigation deep linking with multiple paths

对于react-navigation 4或5，但我在react-navigation 6文档中找不到任何关于此的内容。

任何帮助或建议将不胜感激。

谢谢!

Answer 1

URL 路径应为字符串，而不是数组。暴力解决方案，您可以添加与 FirstTeam、HandBall 和 Club 相关的不同路线名称，如下所示:

const paths = [
  "teams/first-team/content/:id",
  "teams/handball/content/:id",
  "teams/club/content/:id",
];

function getPathName(path) {
  return path.split("/")[1];
}
function generatePaths(paths) {
  let screenPaths = {};

  paths.forEach((path) => {
    const pathName = getPathName(path);
    screenPaths[pathName] = {
      path,
    };
  });
  
  return screenPaths
}

export const navigationConfig = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          ...generatePaths(paths)
        },
        
     }
    }
  }}

const renderDynamicRoutes = () =>
  paths.map((path) => (
    <Stack.Screen
      key={path}
      name={getPathname(path)}
      component={ArticleScreen}
    />
  ))


<Stack.Navigator>
{renderDynamicRoutes}
  {/* other stack navigator routes*/}
</Stack.Navigator>