我应该如何构造一个深度链接配置对象来与这些导航器一起工作？

Question

给定以下导航器层次结构，构造链接配置对象的正确方法是什么？按照目前的构造，当尝试打开 'myapp://bizpage/1' 时，我收到此错误：

从 URL 解析的导航状态包含根导航器中不存在的路由。这通常意味着链接配置与导航结构不匹配。有关如何指定链接配置的更多详细信息，请参阅 https://reactnavigation.org/docs/configuring-links。

我按照文档进行了攻击 google 整个晚上。我看不出哪里错了。

有人能给我指出正确的方向吗？

function AppNav({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="AuthFlow"
        component={AuthFlow}
      />
      <Stack.Screen
        name="DrawerNav"
        component={DrawerNav}
      />
    </Stack.Navigator>
  );
}

function AuthFlow({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={Login}
      />
      <Stack.Screen
        name="Signup"
        component={Signup}
      />
    </Stack.Navigator>
  );
}

function DrawerNav({navigation}) {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={Main}
      />
      <Drawer.Screen
        name="Profile"
        component={Profile}
      />
      <Drawer.Screen
        name="Notifications"
        component={NotificationsScreen}
      />
      </Drawer.Navigator>
  );
}

function Main({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="BizPage"
        component={BizPage}
      />
      <Stack.Screen
        name="PeerProfile"
        component={PeerProfile}
      /> 
    </Stack.Navigator>
  );
}

const App = props => {
const linking = {
    prefixes: ['https://myapp.com', 'myapp://'],
    config: {
      screens: {
        AppNav: {
          screens: {
            DrawerNav: {
              screens: {
                Home: {
                  screens: {
                    BizPage: {
                      path: 'bizpage/:id',
                      parse: {id: Number},
                    },
                    PeerProfile: {path: 'peerprofile/:id', parse: {id: Number}},
                  },
                },
              },
            },
          },
        },
      },
    },
  };

  return (
    <Provider store={store}>
      <NavigationContainer
        linking={linking}
        theme={DarkTheme}
        fallback={<Text>Loading...</Text>}>
        <AppNav></AppNav>
      </NavigationContainer>
    </Provider>
  );
};

Answer 1

您没有名为 AppNav 的屏幕。它是一个组件。链接配置应仅包含屏幕名称。

应该在配置下的屏幕是DrawerNav

config: {
  screens: {
    DrawerNav: {
      // ...

我应该如何构造一个深度链接配置对象来与这些导航器一起工作？

How should I structure a deep linking config object to work with these navigators?

deep-linking

ios

react-native

react-navigation