将 React Navigation v4 深层链接配置迁移到 React Navigation v5 时遇到问题

Posted 2023-02-21

【中文标题】将 React Navigation v4 深层链接配置迁移到 React Navigation v5 时遇到问题

【英文标题】：Trouble migrating React Navigation v4 Deep Link configuration to React Navigation v5

【发布时间】：2021-11-07 08:22:44

【问题描述】：

我在将深层链接从 React Navigation v4 迁移到 React Navigation v5 时遇到了一些问题。 ????

就上下文而言，我的深度链接在 React Navigation v5 中运行良好，每个选项卡中都有一个标签栏导航器和堆栈导航器。

看起来是这样的：

const MainApp = createBottomTabNavigator(
  
    DiscoverTabStack:  screen: DiscoverTabStack, path: "" ,
    GroupTabStack:  screen: GroupTabStack, path: "" ,
    ProfileTabStack:  screen: ProfileTabStack, path: "" ,
  ,
);

const DiscoverTabStack = createStackNavigator(
  
    Discover:  screen: DiscoverScreen, path: "discover" ,
    DetailedActivityFromDeepLink: 
      screen: DetailedActivityFromDeepLinkScreen,
      path: "discover/activites/:id",
    ,
  

使用 React Navigation v4，我能够成功地将应用深层链接到正确的位置。但是，我在使用 React Navigation v5 时遇到了一些问题。以下是我使用 Reach Navigation v5 的方法。

const Tab = createBottomTabNavigator();
const DiscoverStack = createStackNavigator();

const prefixes = Linking.makeUrl("myapp://");
const linking = 
  prefixes: [prefixes],
  config: 
    screens: 
      DiscoverStack: 
        path: "",
        screens: 
          Discover: 
            path: "discover",
          ,
          DetailedActivityFromDeepLink: 
            path: "discover/activites/:id",
            parse: 
              id: (id) => `$id`,
            ,
          ,
        ,
      ,
    ,
  ,
;

const DiscoverScreens = ( navigation, route ) => 
  return (
    <DiscoverStack.Navigator mode="card">
      <DiscoverStack.Screen
        name="Discover"
        component=DiscoverScreen
      />
      <DiscoverStack.Screen
        name="DetailedActivityFromDeepLink"
        component=DetailedActivityFromDeepLinkScreen
      />
    </DiscoverStack.Navigator>
  );
;

render() 
  return (
    <Container>
      <NavigationContainer linking=linking>
        <Tab.Navigator>
          <Tab.Screen
            name="Discover"
            component=DiscoverScreens
          />
        </Tab.Navigator>
      </NavigationContainer>
    </Container>
  );

很遗憾，上述方法不起作用。我的方法可能有什么问题？如何深度链接到具有标签栏且每个标签中都有堆栈导航器的应用程序？

我相信这对大多数应用程序来说都是一个挑战，所以如果能得到一些帮助，那就太棒了！提前致谢！

【参考方案1】：

我的方法可能有什么问题？

在您的根导航器 (Tab.Navigator) 中，您将屏幕称为 Discover，但在链接配置中，您已写入 DiscoverStack。

链接配置需要与您的屏幕具有相同的名称。

【讨论】：

React Navigation 文档中有一个游乐场，您可以在其中测试链接和配置以查看如何解析链接。不，不可能为每个屏幕添加路径。

嗨 Satya——感谢您伸出援手并提供帮助！我能够让它工作。但是，只有在我尝试打开我的 app://discover/activites/:id 时，深层链接才会起作用。但是，这仅在我不在“发现”选项卡上时才有效。为什么会发生这种行为？此外，有时，目标屏幕会在中途切换，然后自动关闭。为什么会这样？