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',
      },
    }
  }
};