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

Question

我对本机路由器使用react-navigation stackNavigator。简单的路径是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"
    }
  );

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