在 React Native 应用中，导航器是必不可少的组件。React Navigation 是 React Native 官方推荐的导航器库，它提供了各种实用的导航器组件，如 Stack Navigator、Tab Navigator、Drawer Navigator 等等。本文将介绍其中的 Stack Navigator 组件，并详细讲解它的 npm 包 react-navigation-stack 的使用方法。
什么是 Stack Navigator？
Stack Navigator 是一种基于堆栈的导航器组件。它维护一个堆栈（stack），负责处理页面间的跳转，并为每个页面生成一个路由（route）。当用户按下页面上的后退按钮时，Stack Navigator 会自动返回前一个页面。它也可以处理从一个页面跳转到另一个页面，实现页面间的无缝切换。
安装和导入 react-navigation-stack
使用 Stack Navigator 需要先安装它的依赖包 react-navigation 和它本身的包 react-navigation-stack。
- --- ------- ---------------- ----------------------
安装完成后，在需要使用 Stack Navigator 的组件中导入它：
------ - -------------------- - ---- -------------------------
创建 Stack Navigator
Stack Navigator 可以接受多个参数，其中最关键的是路由（route）对象，它是一个包含页面名称和参数的 JavaScript 对象。创建 Stack Navigator 时，需要为每个页面都设置一个路由，然后将这些路由组成一个对象，传给 Stack Navigator 组件。下面是一个简单的例子：
------ ----- ---- --------
------ - -------------------- - ---- -------------------------
------ ---------- ---- ---------------
------ ------------ ---- -----------------
----- ------------ - ---------------------
-
----- - ------- ---------- --
------- -
------- -------------
------------------ -- ---------- -- -- -- ------ ---------------------------- --------- ---
--
--
-
----------------- -------
------------------------- -
------------ - ---------------- --------- --
---------------- -------
----------------- - ----------- ------ --
--
--
--这个例子中，我们定义了两个路由，分别是 Home 和 Detail。这两个路由都对应了一个组件，我们分别将它们导入并赋值给变量 HomeScreen 和 DetailScreen。
注意，在定义 Detail 路由时，我们除了指定 screen 属性为 DetailScreen 外，还设置了 navigationOptions 对象。这是为了自定义 Detail 页面的标题，使其能正确显示所选文章的标题。该对象包含两个属性，一个是 title，它指定了页面的标题，另一个是 navigation，它可以用来获取路由参数。在这里，我们调用了 navigation.getParam() 方法来获取路由参数中的 title，如果没有找到则使用默认值 'Detail'。
最后，我们将这个路由对象传给 createStackNavigator() 函数，得到一个 Stack Navigator 组件。initialRouteName 属性指定了 Stack Navigator 的初始路由，这里我们指定为 Home。defaultNavigationOptions 属性则用来设定所有页面的默认导航选项，包括 headerStyle、headerTintColor 和 headerTitleStyle 等。
组件的使用方法和其他 React 组件一样。在 render() 方法中，我们可以将 Stack Navigator 组件当作一个普通组件来使用：
----- --- ------- --------------- -
-------- -
------ ------------- ---
-
-跳转和传参
在 Stack Navigator 中，页面的跳转由路由对象进行控制。我们可以使用 navigate() 方法来跳转到指定的路由，并可以通过第二个参数来传递参数。
---------------------------------------- - --- ---- ------ ------ ------ ---
这里我们跳转到名为 Detail 的路由，并传递了两个参数：id 和 title。在 DetailScreen 组件中，我们可以用如下方式获取这些参数：
----- -- - ------------------------------------- ----- ----- - --------------------------------------- ----------
getParam() 方法的第一个参数是参数名称，如果没有找到该参数则返回默认值（这里是 'Detail'）。
标题和选项卡
Stack Navigator 还支持自定义页面标题和选项卡。我们可以在 navigationOptions 对象中设置相应的属性：
----- ---------- ------- --------------- -
------ ----------------- - -
------ -------
------------ -------
----------- -- --------- -- -- -
--------- --------------- --------- ----------------- --
--
--
-- ---
-在这里，我们设置了 title 属性来自定义页面标题。另外，我们还设置了 tabBarLabel 和 tabBarIcon 属性，分别用于自定义选项卡的文本和图标。这些属性都是可选的，根据需要进行设置即可。
总结
Stack Navigator 是 React Navigation 中最常用的导航器组件之一，它提供了方便的页面管理和跳转功能。本文介绍了 Stack Navigator 的 npm 包 react-navigation-stack 的使用方法，包括创建 Stack Navigator、跳转和传参、自定义页面标题和选项卡等。希望本文对你有所帮助，欢迎关注我的博客获取更多前端开发技术资讯。
示例代码：https://github.com/yourgithubname/react-navigation-stack-tutorial
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2e93c23b0ab45f74a8bc47