旧机宝开发笔记之：RN应用的导航React Navigation（入门）

RN应用是显示在原生的一个页面（Activity）中的，并且RN只有一个入口，但是RN应用可能包含多个页面，那么RN怎么做页面跳转呢？有安卓开发经验的可能会想：既然RN是加载在一个Activity里，本来安卓原生里就是用一个activity来绘制一个页面，那我写多个Activity分别加载不同RN页面不就好了么？这种做法并不现实，相当于把一个App里的每个页面都单独打包成一个App，并分别安装，然后通过点击不同的图标来切换页面。RN应用作为一个独立的应用，页面切换的能力肯定是要有的。不过这种能力并不是RN框架自带的，官方告诉我们：你要做页面切换、跳转，那就去用React Navigation吧。
RN应用和Native应用之间的通信（入门）官网
既然如此，学习React Navigation就很有必要了。

安装React Navigation

上面说到RN并不提供控制页面切换的导航器，推荐我们使用的其实是第三方框架，使用之前需要先添加依赖。
在RN项目根目录打开命令行并安装React Navigation

 npm install @react-navigation/native

安装React Navigation的依赖包，如果已经安装并且是最新版本则可以忽略。

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

React Navigation最基本的依赖就添加完毕了，之后的不同种类导航器都要在上面这些的基础之上。
在RN应用的入口js中（App.js）最上方添加以下引入：

import 'react-native-gesture-handler';

然后使用NavigationContainer包裹原来的内容。

import {
   NavigationContainer} from '@react-navigation/native';
...
render() {
   
    return (
      <NavigationContainer>
        <View>
          <Button onPress={
   this._onPress} title={
   '显示Toast'} />
        </View>
      </NavigationContainer>
    );
  }

这样，NavigationContainer包裹的内容就具备基本的React Navigation能力了，相当于我们把自己的RN应用放置在一个导航器的框架之中。

堆栈导航器（stack navigator）

声明页面

虽然我们已经把RN应用放到导航器里了，但是导航器可能有很多种，比如像android对activity的管理就是一种堆栈式的页面切换，比如像android中的tab便签也可以根据选中的tab来加载不同的activity（当然现在多用fragment来替换），之前也说过了只是添加了React Navigation最基本的库，并把RN置于React Navigation之中，但是具体的导航方式还是各不相同的。类似于android的activity的切换是一种基本的页面切换能力一样，React Navigation的堆栈导航器（stack navigator）也是众多导航器中最基本的一个，而且其和网页的切换以及android的activity的切换有着高度的相似性，因而选它来入门React Navigation。
之前已经安装了React Navigation的基础依赖，现在需要在此基础之上引用堆栈导航器（stack navigator）的依赖资源了：

npm install @react-navigation/stack

现在让我们来回忆一下我们是怎么在android上使用activity的（二者使用方式非常相似，类比于activity是一个事半功倍的切入点）。
android中首先我们要在配置文件里声明一个activity的存在，同样的，我们也要先在一个地方声明我们将用到的RN页面。这个地方就是堆栈导航器给我们提供的Stack.Navigator。（我们通过

import {
   createStackNavigator} from '@react-navigation/stack';

引入堆栈导航器，并拿到常量实例：

const Stack = createStackNavigator();

）
现在我们可以在NavigationContainer里放置一个Stack.Navigator来声明页面了：

function