react-native - Trouble migrating React Navigation v4 Deep Link configuration to React Navigation v5

Question

I'm having some trouble migrating my deep-link from React Navigation v4 to React Navigation v5.

For context, my deep linking has been working perfectly in React Navigation v5 with a tab bar navigator and stack navigators in each tab.

Here's what that looked like:

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",
    },
  }

With React Navigation v4, I'm able to successfully deep link into the app to the correct place. However, I'm having some trouble with React Navigation v5. Below is how I'm approaching it with 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>
  );
}

Unfortunately, the above is not working. What may be wrong with my approach? How does one deep-link into an app that has tab bars with stack navigators in each tab?

I'm sure that this is a challenge for the majority of apps out there, so it'll be awesome for some help!! Thanks in advance!

标签： react-nativereact-navigationdeep-linkingreact-navigation-v5react-navigation-stack

Answer 1

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

在您的根导航器 ( Tab.Navigator) 中，您调用了 screen Discover，但在链接配置中，您已经编写了DiscoverStack.

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