在 React Native 中，为了实现多页面的跳转，开发者会用到 React Navigation 这个第三方库。React Navigation 提供了一种灵活易用的导航解决方案，可以帮助开发者在应用中实现多种导航方式，包括 Stack Navigator、Tab Navigator、Drawer Navigator 等等。
本篇文章主要介绍 React Native+React Navigation 中如何打造多级路由，其中多级路由指的是在 Stack Navigator 中嵌套其他 Navigator，例如在 Stack Navigator 中嵌套 Drawer Navigator。
一、创建 Stack Navigator
在使用 React Navigation 之前，需要安装 react-navigation 库。在命令行中运行以下命令进行安装：
npm install --save react-navigation
在创建 Stack Navigator 之前，需要先导入 createStackNavigator 方法，代码如下：
import { createStackNavigator } from 'react-navigation';然后，调用 createStackNavigator 方法，将需要使用的 screens 传入该方法。screens 是一个对象类型的参数，用来指定每个屏幕对应的组件。
以下是一个简单的 Stack Navigator 实现示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - -------------------- - ---- -------------------
----- ---------- ------- --------- -
------ ----------------- - -
------ -------
--
-------- -
------ -
------
---------- -------------
-------
--------- -- --------
----------- -- ------------------------------------------
--
-------
--
-
-
----- ------------- ------- --------- -
------ ----------------- - -
------ ----------
--
-------- -
------ -
------
------------- -------------
-------
--------- -- ------ ----------
----------- -- --------------------------------------------------
--
-------
--
-
-
----- -------------- - ---------------------
-
----- -----------
-------- --------------
--
-
----------------- -------
-
--
------ ------- ---------------其中我们使用 createStackNavigator 方法创建了一个 Stack Navigator，并传入了两个 screens：HomeScreen 和 DetailsScreen。Stack Navigator 采用的是栈式导航，首先从 HomeScreen 开始导航流程。在 HomeScreen 中，我们放置了一个 Button 组件，通过 onPress 函数跳转到 DetailsScreen。具体的跳转函数为 this.props.navigation.navigate('Details')，其中 navigate 函数的参数是一个字符串，代表需要跳转到的 screen 名称。
在 DetailsScreen 中同样放置了一个 Button 组件，通过 onPress 函数跳转到 NestedNavigator。注意，因为嵌套了其他 Navigator，所以跳转函数的参数需要写成 this.props.navigation.navigate('NestedNavigator')。
二、嵌套 Drawer Navigator
在 Stack Navigator 中嵌套 Drawer Navigator，需要在 createStackNavigator 方法的参数中传入一个名叫 navigationOptions 的对象，其中包含 drawerLabel 和 drawerIcon 两个属性。drawerLabel 是一个字符串类型的参数，用来指定该导航项在 Drawer Navigator 中显示的文本。drawerIcon 是一个 React 组件类型的参数，用来指定该导航项在 Drawer Navigator 中显示的图标。
以下是一个在 Stack Navigator 中嵌套 Drawer Navigator 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ------- ---------------- - ---- ---------------
------ - -------------------- - ---- -------------------
------ - --------------------- - ---- --------------------------
----- ---------- ------- --------- -
------ ----------------- - -
------ -------
--
-------- -
------ -
------
---------- -------------
-------
--------- -- --------
----------- -- ------------------------------------------
--
-------
--
-
-
----- ------------- ------- --------- -
------ ----------------- - -
------ ----------
--
-------- -
------ -
------
------------- -------------
-------
--------- -- ------ ----------
----------- -- --------------------------------------------------
--
-------
--
-
-
----- ----------- ------- --------- -
------ ----------------- - -
------------ --------
--
-------- -
------ -
------
----------- -------------
-------
--
-
-
----- ------------- ------- --------- -
------ ----------------- - -
------------ ----------
--
-------- -
------ -
------
------------- -------------
-------
--
-
-
----- --------------- - -----------------------
------ -
------- ------------
--
-------- -
------- --------------
--
---
----- -------------- - ---------------------
-
----- -----------
-------- --------------
---------------- ----------------
--
-
----------------- -------
------------------ -- ---------- -- -- --
------------ -- -- -
----------------- ----------- -- ---------------------------
-------------------
-------------------
--
----------- -- -- -
----------------- ----------- -- ---------------------------
-----------------
-------------------
--
---
-
--
------ ------- ---------------在以上示例中，我们创建了一个 DrawerNavigator 并分别将 AboutScreen 和 ContactScreen 注册到了该 Navigator 中。在 createStackNavigator 方法中，我们将 NestedNavigator 设置为 DrawerNavigator 并指定该 screen 的名称为 'NestedNavigator'。在 navigationOptions 属性中，我们定义了 drawerLabel 和 drawerIcon 这两个属性，用来在 Drawer Navigator 中自定义导航项的显示效果。
drawerLabel 和 drawerIcon 都是返回函数的属性，并且函数中需要渲染出一个 TouchableOpacity 组件。在 TouchableOpacity 组件中，我们可以使用 onPress 函数来调用 navigation.toggleDrawer() 方法，该方法用于在 Drawer Navigator 中控制导航菜单的打开和关闭。在 TouchableOpacity 中渲染的文本和图标则可以自定义。在上述示例中，我们分别使用了 Text 组件和 'Menu' 文本来渲染 drawerIcon 属性。
三、总结
至此，我们已经成功地在 React Native+React Navigation 中实现了多级路由。通过在 Stack Navigator 中嵌套其他 Navigator，可以帮助我们更好地组织应用中的各个页面，并提高用户的使用体验。
在实际项目中，还可以根据具体需求自定义各种导航方式。React Navigation 提供了丰富的导航方式和参数配置，可以根据不同的页面场景进行灵活配置，以达到最佳的使用效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64883f2b48841e98946c2d63