javascript - 如何在没有嵌套导航的情况下进行导航

Question

我使用react-navigation stackNavigator作为我的 native 路由器。简单的路径是 LoginRouter -> DashboardRouter -> AddressRouter，此处为映射树。

// LoginRouter.js
const LoginRouter = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Dashboard: DashboardRouter
  },
  {
    initialRouteName: "Login"
  }
);

// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
  {
    MessageRouter: MessageRouter,
    AddressRouter: AddressRouter,
  },
  {
    ...
  }
);

// AddressRouter.js
const AddressRouter = createStackNavigator(
  {
    // these all navigator will become a nested navigation
    Address: Address,
    UserAdd: UserAdd,
    UserGroup: UserGroup
  },
  {
    initialRouteName: "Address"
  }
);

如果我想让AddressRouter在没有嵌套导航的情况下进行导航，我该如何更改此代码？

PS

当我将 AddressRouter 提取到 LoginRouter 时，导航工作正常。

// LoginRouter.js
const LoginRouter = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Dashboard: DashboardRouter,
    Address: Address,
    UserAdd: UserAdd,
    UserGroup: UserGroup
  },
  {
    initialRouteName: "Login"
  }
);

// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
  {
    MessageRouter: MessageRouter,
    AddressRouter: AddressRouter,
  },
  {
    ...
  }
);

Answer 1

如果我的问题正确，您可以做的是创建另一个导航器作为根导航器(另一个 StackNavigator 或 SwitchNavigator)并包含您的 LoginRouter，AddressRouter 在那里。

也许是这样的？

const rootNavigator = createSwitchNavigator(
    {
      LoginRouter: {
        screen: LoginRouter,

      },
      AddressRouter: {
        screen: AddressRouter,

      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: "LoginRouter"
    }
  );

这只是一个示例，旨在让您了解如何实现路由器。