withNavigation是一个更高阶的组件，它可以将navigation属性传递给一个包装好的组件。当您无法直接将navigation传递到组件中，或者不想在深层嵌套的子项中传递它时，它将很有用。

1
2
3
4
5
6
7
8
9
10
11

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from &...

在默认情况下，当用户点击返回键时，react-navigation将会返回上一级页面，或者直接退出程序（当没有上一级页面时）。这是默认的合理处理，但有些情形下我们可能希望自定义返回键的一些行为。

假如你正在查找一种简单的处理，可以直接导出社区开源的包：react-navigation-backhandler。在接下来的小节中，我们将会介绍这个包是如何实现返回键的自定义功能的

举个例子，在某个页面，用户选择了列表的某一项，选中的那项当前是选中状态。当你按下返回键时，你首先希望的是选中的那项变成不被...

每个页面都可以配置来决定它在导航器中的呈现方式。在基础文档的配置标题栏部分，我们介绍了它的工作原理。

在本文档中，我们将会解释当有多个导航器一起使用时它是如何工作的。看完该章节，你将学习到如何将navigationOptions放在正确的位置，并确保可以正确的配置导航器。如果你把它们放在错误的地方，有可能什么都不会发生，但也可能会发生令人困惑和意外的事情。值得庆幸的是，以下的环节理解起来相对比较简单。

只能从导航器的某个屏幕组件来修改它的导航选项。这同样适用于导航器嵌套使用的情况

试想这样的一种...

堆栈导航器和抽屉导航器下的沉浸状态栏

在使用堆栈导航器和抽屉导航器下实现沉浸状态栏相对比较简单，你可以直接使用由React Native提供的StatusBar组件，并设置你的配置。

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

import React from...

大部分应用在用户访问与用户相关的数据或者其他一些私有内容时，需要先进行身份验证。通常，流程将如下所示：

• 用户打开应用程序
• 该应用从数据存储层加载一些身份验证的状态（例如从AsyncStorage加载）
• 加载状态后，通过判断是否加载了有效的身份验证状态，来决定跳转到身份验证界面或者主应用界面
• 当用户注销时，我们清除身份验证状态，并返回到身份验证界面

配置我们的导航器

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
30
31
32
33
34
35
36
37...

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

本指南介绍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...