React Navigation 5 嵌套导航中的深度链接

Question

如何在 React Navigation 的嵌套导航器中实现深度 linking。这里我有一个嵌套的堆栈导航器：

function AuthStack() {
  return (
    <Stack.Navigator>
        <Stack.Screen component={Login} name="Login" />  // deep link this screen
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
    </Stack.Navigator>
  );
}

它嵌套在另一个主堆栈导航器中：

const linking = {
  prefixes: ["wagal://"],
  config: {
    screens: {
      AuthStack: "login",  // this doesn't reference `Login` screen on deep linking
    },
  },
};

function homeStack() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen component={AuthStack} name="AuthStack" />  // here
        // ...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我试图深入link“wagal://login/”到Login筛选：

screens: {
  AuthStack: "login",
},

但是没有用，我也试过了：

screens: {
  Login: "login",
},

它们不起作用，我在文档中也找不到任何内容。我该如何解决这个问题？谢谢。

Answer 1

尝试将其作为嵌套导航器处理。

AuthStack 是父名。
Login 是路线名称。
login 是 url 路径。

const config = {
  screens: {
    AuthStack: {
      screens: {
        Login: 'login',
      },
    }
  }
};

React Navigation 5 嵌套导航中的深度链接

Deep Linking In Nested Navigation in React Navigation 5

deep-linking

react-native

react-navigation-v5

react-navigation-v6

尝试将其作为嵌套导航器处理。