React Navigation 5.x详解

一、 React Navigation简介

在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigation。

和之前的版本一样，React Navigation支持的导航类型有三种，分别是StackNavigator、TabNavigator和DrawerNavigator。

• StackNavigator：包含导航栏的页面导航组件，类似于官方的Navigator组件。
• TabNavigator：底部展示tabBar的页面导航组件。
• DrawerNavigator：用于实现侧边栏抽屉页面的导航组件。

1.1 安装

使用React Navigation之前，需要在你的React Native项目中安装所需的软件包，安装的方式分为npm和 yarn两种方式，如下所示。

npm install @react-navigation/native