RN中的底部导航的路由
2017-12-29 本文已影响113人
0安
RN中的底部路由的设置入门
具体参考了如下
react-native-tab-navigator组件的基本使用
1.底部按钮需要安装 react-native-tab-navigator 功能 tab-navigator 并没有包含早react-native包中需要再次下载
cmd窗口中输入 npm install react-native-tab-navigator --save
我的项目的目录 只是测试的,tabBar.js是注册的组件 head.js跟App.js是导航切换的两个页面
![](https://img.haomeiwen.com/i4986442/cf256122d295b34f.png)
2.开始设置底部导航的路由
![](https://img.haomeiwen.com/i4986442/c35636823b55dfa8.png)
如图所示我们首先需要引入 tabNavigator 和 导航的相关页面 Head ,App
![](https://img.haomeiwen.com/i4986442/fa170f8f70c66a78.png)
![](https://img.haomeiwen.com/i4986442/40df32f97911aefb.png)
![](https://img.haomeiwen.com/i4986442/322af627930a4fd2.png)
3.head.js和App.js 中按照组件的定义写就可以了。
![](https://img.haomeiwen.com/i4986442/2b235a88acd0500a.png)
5.最后的效果
![](https://img.haomeiwen.com/i4986442/268127385ab4fd50.png)
![](https://img.haomeiwen.com/i4986442/921b37cc7c8e9034.png)
引用了react-native-tab-navigator组件的基本使用
![](https://img.haomeiwen.com/i4986442/0e6e88f47048a595.png)
![](https://img.haomeiwen.com/i4986442/5b581eed4309ab09.png)