移动应用程序中最常见的导航风格可能是基于标签选项卡。这些选项卡可能放置在屏幕底部或标题下方。

本指南介绍createBottomTabNavigator的使用，另外，你还可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator为应用程序添加选项卡。

选项卡导航条的小例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from 'react...

在标题栏增加按钮

与标题交互的最常用方法是点击标题左侧或右侧的按钮。 让我们在标题的右侧添加一个按钮（在整个屏幕上最难触摸的地方之一，取决于手指和手机大小，但也是放置按钮的正常位置）。

1
2
3
4
5
6
7
8
9
10
11
12

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress...

设置标题栏标题

屏幕组件可以包含一个名为navigationOptions 的静态属性，它既是一个对象也是一个方法，里边包含了各种的属性配置。我们可以通过它里边的title属性来设置标题栏标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function...

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

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的完整例子。如果翻译不妥当，或者语句不顺，欢迎各位指正~