在前边几个环节，我们学会了如何创建一个包含多个页面的导航器，并且学习了如何在页面间跳转的方法。接下来，我们将在这个环节学习如何在跳转页面时，同时附带参数。这主要有两个步骤：

1. 将多个参数封装成一个对象，并将它作为navigate函数的第二个参数

   1	this.props.navigation.navigate('RouteName', { /* params go here */ })

2. 在屏幕组件中读取相应的参数

   1	this.props.navigation...

在上一个环节中，我们定义了一个包含了两个路由的堆栈导航器，但我们还没有实现让导航器从Home路由跳转到Details路由。（虽然我们确实学习了如何在我们的代码中更改初始路由，但是为了看到另外一个路由，需要我们的用户在代码中更改初始路由，这是一种糟糕的用户体验）

假如是浏览器，我们可以通过以下写法来达到页面跳转

1
2
3

<a href="details.html">Go to Details</a>
或者
<a onClick={() =>...

在Web浏览器中，你可以通过（）标签跳转到不同的页面。当用户单击某个链接时，当前的URL将保存到到浏览器历史记录堆栈。当用户按下后退按钮时，浏览器会从历史堆栈的顶部弹出上一个访问的URL，因此可以切换回到先前访问过的页面。 React Native没有像Web浏览器那样内置全局历史堆栈的功能。

而React Navigation则为您的应用提供了一种在屏幕切换和管理导航历史记录的方法。如果您的应用程序仅使用一个堆栈导航器，那么它在概念上类似于Web浏览器处理导航状态的方式 - 当用户与其交互时，...

React Navigation是一个产生于React Native开源社区的导航解决方案，它允许用户使用纯JavaScript语言开发一个可扩展且易于使用的导航栏。

期望

如果您已经熟悉React Native，那么您将能够快速使用React Navigation！否则，您可能需要首先阅读React Native Express的第1至4部分，然后再开始该部分内容的学习。

本文档的基础部分主要是对React Navigation最重要的知识点进行介绍。 阅读完该文档，可以让您了解如何构建典型的小...

序

该系列文章翻译自React Navigation官方文档：

1. 目前没有翻译全部篇章，只是挑选了本人认为比较重要的文章
2. 在原有的基础上加上了自己的理解
3. 补全了原文提供的例子，所有代码都在本人电脑上运行测试通过

后续

后续将补全所有的文章，并附上使用了React Navigation的完整例子。如果翻译不妥当，或者语句不顺，欢迎各位指正~