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

Question

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

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>
  );
}

我尝试通过以下方式将“wagal://login/”深层链接到Login 屏幕：

screens: {
  AuthStack: "login",
},

但是没用，我也试过了：

screens: {
  Login: "login",
},

他们不工作，我在文档中也找不到任何东西。我该如何解决这个问题？谢谢。

Answer 1

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

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

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