前言
@react-navigation/routers 是 React Navigation 发布的一款路由器包，它支持多个不同路由器，如栈式导航和抽屉导航等。本篇文章将给出 @react-navigation/routers 的使用教程，帮助读者更好地学习和掌握这个工具的使用。
安装
为了使用 @react-navigation/routers，你需要先安装它。通过 npm 安装：
npm install @react-navigation/routers
使用
@react-navigation/routers 支持多种不同的路由器，这里我们将以 StackRouter 和 DrawerRouter 为例进行介绍。
StackRouter 使用
在 StackRouter 中，需要配置一个路由表，通过名称指定哪个屏幕应该位于堆栈中。可以通过 createStackNavigator 函数创建 StackNavigator。
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------------
----- ----- - -----------------------
-------- --------- -
------ -
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
--
-在上述示例代码中，可以看到我们创建了一个名为 MyStack 的堆栈，并在其中定义了两个屏幕 HomeScreen 和 DetailsScreen。当用户进入 MyStack 后，第一个显示的屏幕将是 HomeScreen。
除了使用 Stack.Navigator 和 Stack.Screen，还可以使用 Stack.Navigator 的属性来自定义堆栈的行为。以下是一些常见的用法：
initialRouteName: 指定堆栈的初始路由名称；headerMode: 指定堆栈中标题栏的显示方式；headerTintColor: 指定标题栏中的文本颜色；headerStyle: 指定标题栏的样式；
以下是一个带自定义样式的 MyStack 实例：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------------
----- ----- - -----------------------
-------- --------- -
------ -
----------------
-----------------------
----------------
------------ - ---------------- --------- --
---------------- -------
----------------- - ----------- ------ --
--
-
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
--
-DrawerRouter 使用
在 DrawerRouter 中，需要在路由器中添加屏幕。可以通过 createDrawerNavigator 函数创建一个 DrawerNavigator。
-- -------------------- ---- -------
------ - --------------------- - ---- ----------------------------
----- ------ - ------------------------
-------- ---------- -
------ -
------------------
-------------- ----------- ---------------------- --
-------------- -------------- ------------------------- --
-------------------
--
-在示例代码中，我们创建了一个 DrawerNavigator，并向其中添加了两个屏幕 HomeScreen 和 DetailsScreen。当用户在屏幕中滑动时，手势会出现一个边缘菜单，并显示当前可用的所有屏幕。
以下是一些 Drawer.Navigator 的常见用法：
initialRouteName: 指定堆栈的初始路由名称；drawerPosition: 指定边栏的位置。可以选择'left'或'right'；drawerStyle: 指定边栏的样式；drawerContent: 指定 Drawer.Navigator 中的内容。
以下是一个带自定义样式的 MyDrawer 实例：
-- -------------------- ---- -------
------ - --------------------- - ---- ----------------------------
----- ------ - ------------------------
-------- ---------- -
------ -
-----------------
--------------
---------------- ----------
------ ----
--
----------------- ---------- -- -- -------------- ----------------------- ---
-
-------------- ----------- ---------------------- --
-------------- -------------- ------------------------- --
-------------------
--
-结论
在这篇文章中，我们从安装和使用两方面详细介绍了 @react-navigation/routers 的使用方法，并给出了许多示例用法。如果你想更好地使用和掌握 React Navigation 的路由器部分，那么这篇文章便是一个不错的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6880aa0e2b1d698f8472d9