什么是导航器

一般来讲，大部分的手机应用都是需要多个页面的，比如说

iOS系统的设置应用，有很常见的堆栈式导航

比如手机只带的照片应用，联系人应用等等。

那么这些页面之间如何跳转，如何传参，如何记录跳转的记录，而且大部分页面都会有一个标题栏，这些功能大部分是相同的，所以我们需要一个组件来封装这些重复的部分，这就是导航器的作用。

在这一章中我们要学习的导航器是react navigation，它是react native官方推荐的导航器，原本react native是有自己的导航器的，但是因为性能太差，用起来也不方便，限制也很多，所以现在基本没什么用了。

react navigation完全由react native组件实现，所以非常灵活，组件和手势定制能力强，性能也表现的还是流畅。

我们要用的react navigation版本是第5个大版本，在以前的版本中，多种导航器都是放在一个包里的，从第四版开始，react navigation拆分出了多个包，分为核心包、堆栈式导航器、抽屉导航器、标签导航器，到了第五版，就连标签导航器也拆分成了顶部标签导航器、底部标签导航器，而且整个用法也发生了相当大的改变，除了页面之间跳转的api和以前的版本保持一致之外，几乎完全都不一样了。以前的版本是使用配置的方式，一旦配置之后，想要动态修改导航，就很难了。第五版react navigation完全使用组件的方式来实现，不仅更符合react世界的一切皆组件的理念，也天然就能动态设置导航了，比如说标签导航器，我们可以在很简单的做到在应用运行时，动态修改标签的个数。当然在以前的版本中也可以做到，但是实现方式非常繁琐，不容易理解。

现在，我们来安装react navigation吧

第一步，安装核心包

yarn add @react-navigation/native

第二步，安装react navigation的依赖项

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-reanimated 这是一个性能非常好的动画库

react-native-gesture-handler 是一个跨平台的手势库

react-native-screens 这个库基本不会单独使用，都是作为react navigation的依赖，用原生代码实现了Screen组件，让每一个页面都应用在Screen组件上，如果不安装启动这个库，react-nvigation将会使用View组件实现，性能可能会差一些。
需要在index.js中启用

import { enableScreens } from 'react-native-screens';

enableScreens();

react-native-safe-area-context 安全区域组件库，因为现在iphone x还有越来越多的android异性屏的兴起，我们渲染的组件很可以无法正确的显示出来，这个库可以让我们的组件在安全的区域显示

@react-native-community/masked-view 是一个带蒙版的视图，是下一节中我们要学习的堆栈式导航器所依赖的库

第三步，因为react native 0.60以上，多了自动链接的功能，所以不需要再手动运行react-native link，如果你有mac电脑，并且想运行iOS端，那么还需要运行

cd ios && pod install
cd ..

第四步，进入文件夹android/app/build.grade，在dependencies（依赖项）里添加两行，这两个是react-native-screens的依赖项

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' 
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

再进入android/app/src/main/java/下的MainActivity.java文件，这一步是需要对手势系统做一些支持。

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "应用名";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

为了达到android和iOS保持一致的体验，不得不重新封装手势系统，所以这里会涉及到一些原生的代码
第五步，在index.js里添加

import 'react-native-gesture-handler'; 
// 如果不加这一行，在开发时是好的，在线上版本很有可能闪退。