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

Question

我在将深层链接从 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>
  );
}

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

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

Answer 1

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

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

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