接下来,我们需要使用导航器,把这些页面都连接起来。
导航器的关系:
1. 启动页 和 主页 是 `stack` 导航器
2. 主页中的四个块是 `Bottom Tab` 导航器
# 引入导航容器
所有的导航要通过容器包起来了。
~~~
import { NavigationContainer } from '@react-navigation/native';
~~~
App.js
包起来所有的文件。
![](https://img.kancloud.cn/d5/73/d57369b5393bc64319251033f744002f_1318x684.png)
# 创建 Stack 导航器管理封面页和主页
![](https://img.kancloud.cn/42/50/4250ca9eeffc7047e0062859e329eec3_1938x1240.png)
# 创建底部导航器把主页面中四大块页面管理起来
要主页面创建底部导航器管理四大块页面。
![](https://img.kancloud.cn/48/41/48415147c67b9159d9c78bbd45d3be42_2000x1300.png)
可以在封面面添加个按钮测试一下跳转到主页:
![](https://img.kancloud.cn/18/56/1856536aed5841e414acc80ccf047afb_2764x1270.png)
# 在首页中再使用 Stack 导航器管理子页面
在主页中又可以分为搜索页、视频页、主播个人主页等子页面,需要管理起来:
![](https://img.kancloud.cn/b3/ef/b3ef07b5d21e79ad9b3c00895dc6acfe_1994x1416.png)